为何设置display: inline-block;后元素仍表现为block特性？

你的section设置display: inline-block后仍无法并排，核心问题有两个：

1. 父容器宽度不足 #

你给#container设置了width: 50%，但每个section固定宽度400px，当浏览器窗口宽度较小时，容器的50%宽度会小于两个section的总宽度（400px*2 + 左右边框各1px），导致section因空间不足被迫换行，视觉上和block元素一致。

2. inline-block元素间的空白 #

HTML中section标签之间的换行、空格会被解析为空白字符，这些字符会占据额外宽度，进一步压缩可用空间，加剧换行问题。

解决方案一：改用百分比宽度（推荐） #

将section的固定宽度改为百分比，适配父容器宽度，同时用box-sizing: border-box让边框包含在宽度内，避免额外宽度计算：

#container {
  border: 1px solid black;
  width: 50%;
  margin: 0 auto;
}

#container section {
  width: 50%;
  border: 1px solid red;
  display: inline-block;
  box-sizing: border-box; /* 边框计入宽度 */
}

解决方案二：固定宽度下确保父容器最小宽度 #

如果必须保留section的400px固定宽度，给父容器设置足够的最小宽度，确保能容纳两个section：

#container {
  border: 1px solid black;
  width: 50%;
  min-width: 804px; /* 400*2 + 1px边框*2*2 */
  margin: 0 auto;
}

#container section {
  width: 400px;
  border: 1px solid red;
  display: inline-block;
}

额外处理：消除inline-block间的空白 #

可以通过以下方式去掉section之间的空白字符：

• 把HTML中的section标签连写：

<section>...</section><section>...</section>

• 给父容器设置font-size: 0，再给section恢复字体大小：

#container {
  border: 1px solid black;
  width: 50%;
  margin: 0 auto;
  font-size: 0; /* 消除空白字符 */
}

#container section {
  width: 50%;
  border: 1px solid red;
  display: inline-block;
  box-sizing: border-box;
  font-size: 16px; /* 恢复正常字体大小 */
}

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