嵌套inline-block元素的父布局：首个元素下移原因与解决

示例代码如下：

HTML代码 #

<div class="c">
  <div class="item">
    <div class="wrap">
      <div class="wrap-item"></div>
      <div class="wrap-item"></div>
      <div class="wrap-item"></div>
    </div>
  </div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS代码 #

.item {
  width: 100px;
  height: 100px;
  background-color: black;
  display: inline-block;
}

.wrap {
  width: 100px;
  height: 50px;
  background: green;
}

.wrap-item {
  width: 30px;
  height: 30px;
  background: gray;
  display: inline-block;
}

问题详情 #

为何第一个.item元素会向下偏移？这与元素高度有关，但不清楚具体原因，这是CSS标准行为还是操作失误？若是标准行为，该如何修正此问题？

这是CSS的标准行为，核心原因是inline-block元素默认的垂直对齐规则。

原因分析 #

当元素设置为display: inline-block时，浏览器默认会按照**文本基线（baseline）**对齐它们：

• 对于包含子元素的inline-block（比如第一个.item），它的基线由内部最后一个行内元素的基线决定——这里就是三个.wrap-item的基线位置。
• 对于空的inline-block（后面的几个.item），它的基线等同于自身的底部边缘。

两者基线位置不同，就导致第一个.item被向下推，直到它的基线和其他空.item的基线对齐，最终表现为向下偏移。

修正方法 #

有三种常用且高效的解决方式：

1. 修改垂直对齐方式
   给所有.item元素设置vertical-align属性，替换默认的基线对齐：

.item {
  width: 100px;
  height: 100px;
  background-color: black;
  display: inline-block;
  vertical-align: top; /* 也可选择middle或bottom */
}

2. 消除父元素字体影响
   inline-block的基线对齐和父元素字体大小相关，给父元素.c设置font-size: 0可以规避这个问题，若子元素需要文字，再单独恢复字体大小：

.c {
  font-size: 0;
}
.item {
  font-size: 16px; /* 按需设置，无文字可省略 */
}

3. 改用Flex布局
   Flex布局天然规避了inline-block的对齐问题，同时能保持类似的换行效果：

.c {
  display: flex;
  flex-wrap: wrap; /* 实现元素换行，和原布局效果一致 */
}

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