如何设置css的外间距及其设置方法

2025-01-06 技术教程

如何设置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代码的实例，加了点边框在里面，所以我们看到的效果如图：

这就是刚才那串代码的效果。

我们现在来看看使用外边距的效果：

上面这是用css样式来把p标签上面和div标签中间的距离给取消了，现在看图：

效果是不是和上面说的一样。

现在我们看看如果把p标签的四个外边距都取消了之后会有什么效果，我们来看看：

代码是不是感觉和上面一样，但是也很明显这是把里面的向上的元素给取消了，所以现在变成了四面外边距都是零了，我们来看看效果吧：

是不是很明显，所有的外边距都没有了。

但是如果我们想设置外边距的时候该怎么办呢？

也很简单，再来看看实例吧：

这是把所有的外边距都设置成了二十，看的出来吧，那么就来看看效果图吧：

大家可以很清楚的看到，四周的边框都是为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的外间距及其设置方法的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！