CSS Flex布局中行间距过大，如何消除该间隙？

问题描述 #

现有一个class为cont的Flex容器，内部嵌套了<a>标签包裹的两类子元素（item1和item2，高度不同），运行后Flex布局的行之间出现明显的过大间隙，需要消除这个问题。

原代码 #

CSS代码

.cont {
  background-color: red;
  width: 1000px;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.item1 {
  background-color: orange;
  width: 100px;
  height: 110px;
  margin: 5px;
}

.item2 {
  background-color: pink;
  width: 100px;
  height: 50px;
  margin: 5px;
}

HTML代码

<div class='cont'> 
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item2"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item2"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
</div>

问题原因 #

Flex容器的直接子元素是<a>标签，而<a>默认是行内元素，浏览器会为行内元素预留基线对齐的空白空间，再加上行内元素默认的line-height和vertical-align属性影响，最终导致行与行之间出现额外的大间隙。

解决方案 #

方案1：将设置为块级元素（推荐） #

把<a>改为块级元素，消除行内元素的默认空白，同时把原来子元素的margin移到<a>上，保证间距控制准确：

.cont {
  background-color: red;
  width: 1000px;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* 修改<a>的显示模式并设置margin */
.cont a {
  display: block;
  margin: 5px;
}

.item1 {
  background-color: orange;
  width: 100px;
  height: 110px;
  margin: 0; /* 移除原有margin */
}

.item2 {
  background-color: pink;
  width: 100px;
  height: 50px;
  margin: 0; /* 移除原有margin */
}

方案2：调整的垂直对齐方式 #

如果不想改变<a>的显示模式，可以直接设置vertical-align: top来消除基线空白：

.cont a {
  vertical-align: top;
}

这个方案能快速解决间隙问题，但相比块级元素的设置，在复杂布局中可能仍有潜在的行内元素样式影响。

修改后效果 #

调整后，Flex布局的行间距会完全由你设置的margin控制，不会出现额外的空白间隙，子元素会紧密排列。

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