如何为HTML每行添加下方间距？Flex布局问题求助

问题描述 #

我试过用br标签和margin样式给当前代码的每行加间距，但都没效果。同时拿不准现在的HTML布局合不合适，纠结要不要换成table——table能实现行间距，但代码太啰嗦。

现有代码示例 #

Table布局示例 #

<table>
    <tr>
        <td>Etiam poseure</td>
        <td class="tučny__text">Nulla est</td>
    </tr>
    <tr>
        <td>Fusce wisi</td>
        <td class="tučny__text">2305</td>
    </tr>
    <tr>
        <td>Bla hola tola et</td>
        <td class="tučny__text">Rerum trada</td>
    </tr>
    <tr>
        <td>Vie visi</td>
        <td class="tučny__text">A</td>
    </tr>
</table>

当前Flex布局（用br标签换行） #

<div class="card-table">
    <div class="left-column">
        Etiam poseure <br />
        Fusce wisi <br />
        Bla hola tola et <br />
        Vie wisi
    </div>
    <div class="right-column">
        Nulla est<br />
        2305 <br />
        Rerurm trada <br />
        A
    </div>
</div>

配套CSS代码 #

.card-table{
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
    border: 1px solid black;
}

.left-column {
    flex-basis: 45%;
    font-weight: normal;
    font-style: italic;
    text-align: right;
}

.right-column {
    flex-basis: 45%;
    text-align: left;
}

.left-column br,
.right-column br {
    margin-bottom: 10px; 
}

解决方案 #

1. 最优方案：用块级元素代替br标签 #

br是行内元素，没法通过margin设置间距。把每行文本用<p>或<div>包裹，再给这些块级元素加margin就行，代码更语义化，调整也灵活。

修改后的HTML：

<div class="card-table">
    <div class="left-column">
        <p>Etiam poseure</p>
        <p>Fusce wisi</p>
        <p>Bla hola tola et</p>
        <p>Vie wisi</p>
    </div>
    <div class="right-column">
        <p>Nulla est</p>
        <p>2305</p>
        <p>Rerurm trada</p>
        <p>A</p>
    </div>
</div>

修改后的CSS：

.card-table{
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
    border: 1px solid black;
}

.left-column {
    flex-basis: 45%;
    font-weight: normal;
    font-style: italic;
    text-align: right;
}

.right-column {
    flex-basis: 45%;
    text-align: left;
}

/* 设置每行间距 */
.left-column p,
.right-column p {
    margin-bottom: 10px;
}

/* 去掉最后一行的间距，避免底部多余空白 */
.left-column p:last-child,
.right-column p:last-child {
    margin-bottom: 0;
}

2. 退而求其次：用line-height模拟间距（如果坚持用br） #

如果不想改HTML结构，给左右列设置line-height也能实现类似效果：

.left-column, .right-column {
    line-height: 1.8; /* 数值根据需求调整 */
}

3. 布局选择建议 #

没必要换table布局，table是用来展示表格数据的，当前的flex布局更符合语义化标准，而且用块级元素调整间距的方案代码更简洁，后续维护也更方便。

内容的提问来源于stack exchange，提问作者Bradley Kohr