【问题标题】: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;,还是不行。

【问题讨论】:

  • 我正在使用 React,我不知道是否有办法为此创建示例。

标签: html css frontend


【解决方案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。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-10-31
      • 2020-05-06
      • 2023-01-26
      • 2017-09-13
      • 1970-01-01
      • 1970-01-01
      • 2020-11-01
      相关资源
      最近更新 更多