一、margin 是什么
CSS margin(外边距)是CSS盒模型中的一个重要属性,可以控制元素与其周围元素之间的间隔或留白。它是由上下左右四个方向的值组成的,可以设置为具体的长度值,也可以设置为 auto 或百分比。一个元素可以有多个 margin 值,每个值之间用空格分隔。
margin 值可以影响元素的位置和大小。元素的外边距会将元素和文档中其它元素之间的距离扩大。当元素包含在容器中时,还会将元素和容器之间的距离扩大。
p { margin: 10px; }
二、margin 的几种用法
1. margin 的缩写
margin 可以使用缩写方式来设置上下左右四个值,分别对应四个方向的外边距大小,按顺序依次为 top、right、bottom、left。
p { margin: 10px 20px 30px 40px; }
上面的代码表示p元素的上边距为10px,右边距为20px,下边距为30px,左边距为40px。
2. margin 水平居中
通过 margin-left 和 margin-right 设置 auto,可以实现元素水平居中的效果,适用于块级元素。
.container { text-align: center; } .box { width: 200px; margin: auto; }
3. margin 去除外边距
有时候我们需要去掉元素的外边距,可以使用负值的方式,将 margin 设置为负数。
p { margin: -10px; }
上面的代码表示p元素的上下左右外边距均为-10px。
三、margin 的注意事项
1. margin 合并
当相邻两个元素具有相同的 margin 值时,它们之间的边距将会合并,合并后的外边距大小为两个外边距中的较大值。
p { margin-bottom: 20px; } h3 { margin-top: 30px; }
上面的代码中,h3 元素的上外边距为30px,p 元素的下外边距为20px,它们相邻的部分的外边距将会合并,合并后的外边距为30px,即两个外边距中的较大值。
2. margin 与边框的交界处
当 margin 与边框的交界处重叠时,交界处只会显示其中的一个。
div { width: 200px; height: 200px; border: solid 1px black; margin: 50px; }
上面的代码中,div 元素的外边距为50px,边框为1px的黑色实线,div 在浏览器中呈现出来时,边框和外边距没有重叠,这是由于边框显示在外面,而外边距则显示在边框内部。
3. margin 与父容器边框的交界处
当 margin 与父容器边框的交界处重叠时,父容器并不会扩大,而是会采用最大的边距值。
.container { width: 200px; height: 200px; border: solid 1px black; } .box { margin: 50px; height: 100px; width: 100px; }
上面的代码中,box 元素的外边距为50px,父容器的边框为1px的黑色实线,box 元素在父容器中间,当外边距和边框重叠时,父容器并不会扩大,而是采用最大的边距值100px。