CSS中最常用的布局属性包括外边距（margins）、内边距（padding）和边框（border）。本文将着重介绍外边距的相关知识。
一、外边距是什么
在CSS中，外边距定义了元素之间的距离。也就是说，外边距是指元素周围的空白区域，用来控制元素与其周围元素之间的距离。
举个例子，如果我们想在文本周围添加一些空白区域，可以使用
margin属性
。假设我们有一段段落文本：
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum mi ac ipsum facilisis rutrum. Vivamus quis faucibus magna. Proin in ipsum dapibus, facilisis lacus in, gravida turpis. Sed rutrum euismod odio, vel consectetur enim fringilla et. Sed et justo fermentum, lobortis odio eget, varius neque. Aliquam volutpat est diam, vel lacinia elit suscipit sed. Aenean fringilla magna ut risus congue, nec scelerisque enim fringilla. Curabitur nunc lorem, sagittis non metus at, dictum rutrum leo. Integer nec nisl magna.
如果我们想在段落周围添加一些空白，可以使用以下CSS代码：
p{
margin: 10px;
}
这将会为段落元素添加10px的外边距，从而让文本与周围的元素保持距离。
二、外边距的属性
在使用外边距之前，我们需要了解一些常用的外边距属性：
- margin-top：上外边距
- margin-bottom：下外边距
- margin-left：左外边距
- margin-right：右外边距
这四个属性分别对应元素的上、下、左、右四个方向。我们可以使用这些属性来为元素定义外边距：
p{
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
margin-right: 20px;
}
这将会为段落元素定义上下10px、左右20px的外边距。
三、外边距的值
除了上述四个外边距属性，我们还可以为元素定义一个复合外边距属性，即margin属性。
margin属性可以同时定义上、下、左、右四个外边距的值，并且还可以使用一些特殊的值：
- auto：自动计算外边距值
- inherit：继承父元素的外边距值
例如，要为元素定义左右居中的外边距，可以使用以下CSS代码：
div{
width: 200px;
margin: 0 auto;
}
这将会使DIV元素水平居中，并保持左右相等的外边距。
四、外边距的影响
外边距不仅可以控制元素与周围元素的距离，还可以影响元素本身的大小。也就是说，当我们为元素定义外边距时，实际上是在改变元素的盒模型。
例如，当我们为一个元素定义了10px的外边距时，实际上是将元素的总宽度增加20px（两侧各加10px）。因此，如果我们希望元素占据指定的宽度，需要将其宽度减去外边距的值。
div{
width: 200px;
margin: 10px;
/* 实际宽度为220px */
/* 需要将其宽度减去外边距的值 */
box-sizing: border-box;
}
可以看到，为了让元素占据指定的宽度，我们需要使用CSS3的box-sizing属性。该属性可以让元素的宽度包括内边距和边框，而不是只包括内容区域。
五、总结
外边距是CSS中控制元素间距和影响元素盒模型的重要属性。我们可以使用上述介绍的外边距属性和值，为元素定义不同的外边距大小和位置，从而实现各种各样的布局效果。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/259399.html
微信扫一扫 
支付宝扫一扫 