CSS margin 在段落中的使用方法

小蓝 • 2024-12-03 16:33 • 编程

CSS margin（外边距）是CSS盒模型中的一个重要属性，可以控制元素与其周围元素之间的间隔或留白。它是由上下左右四个方向的值组成的，可以设置为具体的长度值，也可以设置为 auto 或百分比。一个元素可以有多个 margin 值，每个值之间用空格分隔。

margin 值可以影响元素的位置和大小。元素的外边距会将元素和文档中其它元素之间的距离扩大。当元素包含在容器中时，还会将元素和容器之间的距离扩大。

p {
  margin: 10px;
}

margin 可以使用缩写方式来设置上下左右四个值，分别对应四个方向的外边距大小，按顺序依次为 top、right、bottom、left。

p {
  margin: 10px 20px 30px 40px;
}

上面的代码表示p元素的上边距为10px，右边距为20px，下边距为30px，左边距为40px。

通过 margin-left 和 margin-right 设置 auto，可以实现元素水平居中的效果，适用于块级元素。

.container {
  text-align: center;
}

.box {
  width: 200px;
  margin: auto;
}

有时候我们需要去掉元素的外边距，可以使用负值的方式，将 margin 设置为负数。

p {
  margin: -10px;
}

上面的代码表示p元素的上下左右外边距均为-10px。

当相邻两个元素具有相同的 margin 值时，它们之间的边距将会合并，合并后的外边距大小为两个外边距中的较大值。

p {
  margin-bottom: 20px;
}

h3 {
  margin-top: 30px;
}

上面的代码中，h3 元素的上外边距为30px，p 元素的下外边距为20px，它们相邻的部分的外边距将会合并，合并后的外边距为30px，即两个外边距中的较大值。

当 margin 与边框的交界处重叠时，交界处只会显示其中的一个。

div {
  width: 200px;
  height: 200px;
  border: solid 1px black;
  margin: 50px;
}

上面的代码中，div 元素的外边距为50px，边框为1px的黑色实线，div 在浏览器中呈现出来时，边框和外边距没有重叠，这是由于边框显示在外面，而外边距则显示在边框内部。

当 margin 与父容器边框的交界处重叠时，父容器并不会扩大，而是会采用最大的边距值。

.container {
  width: 200px;
  height: 200px;
  border: solid 1px black;
}

.box {
  margin: 50px;
  height: 100px;
  width: 100px;
}

上面的代码中，box 元素的外边距为50px，父容器的边框为1px的黑色实线，box 元素在父容器中间，当外边距和边框重叠时，父容器并不会扩大，而是采用最大的边距值100px。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/197446.html