您好,登录后才能下订单哦!
如何设置css的外间距及其设置方法?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
css的外间距如何设置?
我们的外间距是属于css盒模型之中的一种,那么现在我们来看看外间距都是怎么设置的吧。
margin: 是一个简写属性,可以一个声明中设置所有外边距属性。
来看个完整外边距的实例:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>亿速云</title> <style type="text/css"> .diyi{border:solid #D91C1F thin; width: 400px;} p{border: double;} </style> </head> <body> <div class="diyi"> <p>这是一个p标签,是用来使用外边距的</p> </div> </body> </html>
这是一个简单的HTML代码的实例,加了点边框在里面,所以我们看到的效果如图:
这就是刚才那串代码的效果。
我们现在来看看使用外边距的效果:
<style type="text/css"> .diyi{border:solid #D91C1F thin; width: 400px;} p{border: double; margin-top: auto} </style>
上面这是用css样式来把p标签上面和div标签中间的距离给取消了,现在看图:
效果是不是和上面说的一样。
现在我们看看如果把p标签的四个外边距都取消了之后会有什么效果,我们来看看:
<style type="text/css"> .diyi{border:solid #D91C1F thin; width: 400px;} p{border: double; margin: auto} </style>
代码是不是感觉和上面一样,但是也很明显这是把里面的向上的元素给取消了,所以现在变成了四面外边距都是零了,我们来看看效果吧:
是不是很明显,所有的外边距都没有了。
但是如果我们想设置外边距的时候该怎么办呢?
也很简单,再来看看实例吧:
<style type="text/css"> .diyi{border:solid #D91C1F thin; width: 400px;} p{border: double; margin:20px} </style>
这是把所有的外边距都设置成了二十,看的出来吧,那么就来看看效果图吧:
大家可以很清楚的看到,四周的边框都是为20px。
还可以为单方向设置外边距,比如我们可以看下面这个例子:
<head> <meta charset="utf-8"> <title>亿速云</title> <style type="text/css"> .diyi{border:solid #D91C1F thin; width: 400px;} p{border: double; margin-right:20px} h2{border:double; margin-bottom: 50px} </style> </head> <body> <div class="diyi"> <h2>这里是亿速云</h2> sdfahsdkjfhksjdhf <p>这是一个p标签,是用来使用外边距的</p> </div> </body>
这个实例是把h2标签加了下方的外边距,边距距离为50px,p标签加了右边的外边距,边距距离为20px。我们来看看效果图:
是不是很明显,这就是外边距的用法,还可以在一个属性中设置几个外边距。大家都可以上手试试的,都不是很难。
看完上述内容,你们掌握如何设置css的外间距及其设置方法的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。