[分享]css两行的距离

在 CSS 中，我们通常使用 margin 和 padding 属性来控制元素之间的距离。其中，margin 表示元素与其它元素之间的距离，而 padding 则表示元素内容和边框之间的距离。 .bo...

在 CSS 中，我们通常使用 margin 和 padding 属性来控制元素之间的距离。

其中，margin 表示元素与其它元素之间的距离，而 padding 则表示元素内容和边框之间的距离。

 .box {
    margin: 20px; /* 上下左右都是 20 像素 */
    padding: 10px; /* 内容和边框之间都是 10 像素 */
  } 

我们也可以分别设置不同方向的 margin 或 padding：

 .box {
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 5px;
    margin-right: 15px;
    padding-top: 5px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 20px;
  } 

此外，我们还可以使用 margin 和 padding 的缩写形式，分别用 1~4 个值来表示元素各个方向的距离：

 /* 上、右、下、左 */
  margin: 10px 20px 30px 40px;
  padding: 20px 15px; 

最后，需要注意的是，元素之间的距离不仅取决于自身的 margin 和 padding，还受到其它元素的影响。具体表现为：

• 相邻元素之间的 margin 会叠加，取两者之间的最大值。
• 容器元素内部元素的 margin 不会叠加，取首个元素的 margin 值。