Flexbox删除两个孩子之间的列间隙[重复]答案

【问题标题】：Flexbox remove the column gap between two children [duplicate]Flexbox删除两个孩子之间的列间隙[重复]
【发布时间】：2022-01-15 05:01:11
【问题描述】：

这是代码：

.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;，还是不行。

【问题讨论】：

【解决方案1】：

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>

【讨论】：

【解决方案2】：

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

h4 {
  margin: 0;
}

到您的 CSS。

【讨论】：