Flexbox可移除两个子项之间的立柱间隙

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
______________________

如何缩小两个元素之间的间隙？我尝试了cssgap:10px和列间距：20px，它不起作用。

Answer 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>

Answer 2

默认情况下，h4-标记有一定的裕度。尝试添加

h4 {
margin: 0;
}

到您的CSS。