Flexbox 移除两个 children 之间的列间距

Question

这是代码：

.content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: stretch;
}

<div class="content">
    <h4>type</h4>
    <h4>exp</h4>
</div>

这是它的样子：

______________________

        type


        exp

______________________

如何缩小两个元素之间的差距？我尝试了 css gap: 10px; 和 column-gap: 20px;，它不起作用。

Answer 1

h4-标签默认有一些边距。尝试添加

h4 {
  margin: 0;
}

给你的 CSS.

Answer 2

h4 元素之间的间距是因为默认情况下，h4 周围有一个边距。您可以将 margin: 0 添加到 h4 以防止出现这种情况：

.content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: stretch;
}

.content h4 {
    margin: 0;
}

<div class="content">
    <h4>type</h4>
    <h4>exp</h4>
</div>

Flexbox remove the column gap between two children