inline-block元素无法水平并排问题求助

我不清楚下方两个区块（section.structure与section.specificity）为何无法水平并排。当缩小宽度到某个数值后它们能正常并排，但我需要每个区块宽度约500px（或占屏幕宽度约一半），此时它们却上下堆叠。已尝试修改宽度值、vertical-align属性，但无效果。

HTML代码 #

<main>
      <section class="structure">

      </section>

      <section class="specificity">

      </section>
</main>

CSS代码 #

section.structure {
    border-radius: 20px;
    height: 500px;
    width: 500px;
    background-color: rgb(255, 255, 255);
    margin: 10px;
    border: rgb(245,245, 245);
    display: inline-block;
}

section.specificity {
    border-radius: 20px;
    height: 500px;
    width: 500px;
    background-color: rgb(255, 255, 255);
    margin: 10px;
    border: rgb(245,245, 245);
    display: inline-block;
}

原因分析 #

你用inline-block布局时，元素之间的换行、空格等空白字符会被解析成实际间距，加上每个区块的500px宽度 + 左右各10px margin，总宽度已经超过了父容器（main）的可用宽度，浏览器就会自动让第二个区块换行堆叠。当你缩小区块宽度时，总宽度（含空白、边距）刚好小于容器宽度，自然就能并排了。

解决办法 #

给你几个直接可行的方案：

方案1：清除inline-block元素间的空白

把HTML里两个section之间的换行、空格删掉，写成一行：

<main>
  <section class="structure"></section><section class="specificity"></section>
</main>

这种方法简单直接，但代码可读性稍差。

方案2：用Flexbox布局（推荐）

直接给父容器main添加Flex属性，彻底规避inline-block的空白问题，布局更灵活：

main {
  display: flex;
  gap: 20px; /* 替代margin，控制两个区块的间距 */
  flex-wrap: wrap; /* 屏幕宽度不足时自动换行，可选 */
}

section.structure, section.specificity {
  border-radius: 20px;
  height: 500px;
  width: 500px;
  background-color: #fff;
  border: 1px solid #f5f5f5; /* 你之前的border没指定样式，默认是none，这里补上实线边框 */
  /* 去掉margin，用gap控制间距更方便 */
}

Flexbox是现代前端布局的标准方案，适配各种屏幕，后续调整布局也更省心。

方案3：用百分比宽度适配容器

如果要让区块占屏幕宽度的一半，用calc()计算宽度，减去边距的空间：

section.structure, section.specificity {
  /* 保留其他原有属性 */
  width: calc(50% - 20px); /* 50%宽度减去左右各10px的margin总和 */
  display: inline-block;
  vertical-align: top; /* 确保两个区块顶部对齐，可选 */
}

注意要确保父容器main没有额外的padding，或者给main加上box-sizing: border-box，避免宽度溢出。

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