[分享]css两行两

CSS中的“两行两”是一个常用的排版技巧，指相邻两个元素之间留空两行，通常用于增加版面的整体美观感。下面我们来介绍实现“两行两”的两种方法：方法一：使用margin / 给元素设置上下边距为2个行高 ...

CSS中的“两行两”是一个常用的排版技巧，指相邻两个元素之间留空两行，通常用于增加版面的整体美观感。下面我们来介绍实现“两行两”的两种方法：

方法一：使用margin
/* 给元素设置上下边距为2个行高 */
.element{
    margin: 2em 0;
} 

方法一适用于相邻元素样式相同且不需额外调整上下边距的情况。

方法二：使用伪元素
/* 在元素下方插入一个空的块级元素，高度为两个行高 */
.element::after{
    content: "";
    display: block;
    height: 2em;
} 

方法二适用于相邻元素样式不同需额外调整上下边距的情况，可以根据具体情况调整伪元素高度。