如何解决HTML中行内元素字体大小导致的垂直间隙问题？

给.sub-container添加vertical-align: top属性即可消除垂直间隙，同时保留换行功能且不改变子元素原有高度：

.container {
  border: 1px solid black;
}

.sub-container {
  border: 1px solid black;
  display: inline-flex;
  flex-direction: column;
  vertical-align: top; /* 新增属性消除垂直间隙 */
}

.big-child {
  display: inline-block;
  font-size: 2em;
  border: 1px solid black;
}

.small-child {
  display: inline-block;
  font-size: 0.5em;
  border: 1px solid black;
}

原因说明 #

inline-flex类型的元素默认会以**基线（baseline）**对齐，小字体元素的基线位置会导致相邻的.sub-container之间产生额外的垂直空隙。设置vertical-align: top后，所有容器都会以顶部对齐，空隙自然消失，完全满足你的需求：

• 消除所有垂直间隙
• 保留容器自动换行的功能
• 子元素的高度和原有样式不受影响

对应的HTML代码无需修改：

<div class="container">
  <div class="sub-container">
    <div class="small-child">definition</div>
    <div class="big-child">Word</div>
  </div><div class="sub-container">
    <div class="small-child">definition</div>
    <div class="big-child">Word</div>
  </div><div class="sub-container">
    <div class="small-child">definition</div>
    <div class="big-child">Word</div>
  </div><div class="sub-container">
    <div class="small-child">definition</div>
    <div class="big-child">Word</div>
  </div><div class="sub-container">
    <div class="small-child">definition</div>
    <div class="big-child">Word</div>
  </div><div class="sub-container">
    <div class="small-child">definition</div>
    <div class="big-child">Word</div>
  </div><div class="sub-container">
    <div class="small-child">definition</div>
    <div class="big-child">Word</div>
  </div><div class="sub-container">
    <div class="small-child">definition</div>
    <div class="big-child">Word</div>
  </div><div class="sub-container">
    <div class="small-child">definition</div>
    <div class="big-child">Word</div>
  </div><div class="sub-container">
    <div class="small-child">definition</div>
    <div class="big-child">Word</div>
  </div><div class="sub-container">
    <div class="small-child">definition</div>
    <div class="big-child">Word</div>
  </div><div class="sub-container">
    <div class="small-child">definition</div>
    <div class="big-child">Word</div>
  </div>
</div>

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