html设置外上边距,css的外间距如何设置？css外间距的设置⽅
法（附实例）
css盒模型中有四种元素，分别是内间距、外间距、内容还有边框。这四种定义了盒模型的使⽤，今天我们就来说说关于css盒模型的外间距的使⽤吧
css的外间距如何设置？
我们的外间距是属于css盒模型之中的⼀种，那么现在我们来看看外间距都是怎么设置的吧。
margin： 是⼀个简写属性，可以⼀个声明中设置所有外边距属性。
来看个完整外边距的实例：
PHP中⽂⽹
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double;}
这是⼀个p标签，是⽤来使⽤外边距的margin属性怎么用
这是⼀个简单的HTML代码的实例，加了点边框在⾥⾯，所以我们看到的效果如图：
这就是刚才那串代码的效果。
我们现在来看看使⽤外边距的效果：
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double; margin-top: auto}
上⾯这是⽤css样式来把p标签上⾯和div标签中间的距离给取消了，现在看图：
效果是不是和上⾯说的⼀样。
现在我们看看如果把p标签的四个外边距都取消了之后会有什么效果，我们来看看：
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double; margin: auto}
代码是不是感觉和上⾯⼀样，但是也很明显这是把⾥⾯的向上的元素给取消了，所以现在变成了四⾯外边距都是零了，我们来看看效果吧：
是不是很明显，所有的外边距都没有了。
但是如果我们想设置外边距的时候该怎么办呢？
也很简单，再来看看实例吧：
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double; margin:20px}
这是把所有的外边距都设置成了⼆⼗，看的出来吧，那么就来看看效果图吧：
⼤家可以很清楚的看到，四周的边框都是为20px。
还可以为单⽅向设置外边距，⽐如我们可以看下⾯这个例⼦：
PHP中⽂⽹
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double; margin-right:20px}
h1{border:double; margin-bottom: 50px}
这⾥是PHP中⽂⽹
sdfahsdkjfhksjdhf
这是⼀个p标签，是⽤来使⽤外边距的
这个实例是把h1标签加了下⽅的外边距，边距距离为50px，p标签加了右边的外边距，边距距离为20px。我们来看看效果图：
是不是很明显，这就是外边距的⽤法，还可以在⼀个属性中设置⼏个外边距。⼤家都可以上⼿试试的，都不是很难。
好了，以上就是本篇⽂章的全部内容了，想看更多就来PHP中⽂⽹css学习⼿册栏⽬学习。有问题的可以在下⽅提问。
【⼩编推荐】

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。