CSS使用display:inline-block布局出现非预期效果是什么原因？

你遇到的现象是display: inline-block的两个原生特性导致的，并非代码存在语法错误：

问题原因 #

• inline元素默认空白间隙：你编写的HTML代码中，每个盒子标签之间的换行、空格会被浏览器解析为一个空白字符，会在相邻的inline-block元素之间产生额外间距。即使你设置了每个盒子宽度为200px，4个盒子总宽度会超出800px导致换行，同时盒子之间出现多余空隙。
• 默认基线对齐规则：inline-block元素的vertical-align属性默认值为baseline，会让元素基线和父元素基线对齐，不同盒子内部文字行数不同时，就会出现高度相同但上下错位的效果，也就是你截图中展示的高低不齐问题。

解决方案 #

消除空白间隙可选择以下任意一种方法： #

1. 编写HTML时将所有盒子标签放在同一行，不保留换行空格，缺点是代码可读性差
2. 给所有盒子的共同父元素设置font-size: 0，再在.box类中恢复需要的字号，空白字符字号为0后不会占用空间
3. 给.box设置margin-left: -4px，缺点是不同浏览器空白字符宽度有差异，兼容性一般

解决对齐问题： #

给.box类新增vertical-align: top属性，让所有盒子统一靠顶部对齐即可。

修正后核心代码示例 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/* 假设所有盒子外层有父容器class为container */
.container {
  font-size: 0;
}
.box {
  display: inline-block;
  width: 200px;
  height: 390px;
  color: white;
  padding: 25px;
  vertical-align: top;
  font-size: 16px;
}
.box1 {
  background: turquoise;
}
.box2 {
  background: #f5c402;
}
.box3 {
  background: lightsalmon;
}
.box4 {
  background: teal;
}

<div class="container">
  <div class="box1 box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum sapiente, autem numquam modi dolorem perferendis iure quaerat corrupti nobis!
  </div>
  <div class="box2 box">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias incidunt tempore minima ut asperiores eveniet error eligendi fuga deserunt numquam, voluptas impedit qui repellendus quam architecto, blanditiis unde explicabo quasi.
  </div>
  <div class="box3 box">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate possimus quidem consectetur, laborum quos sed?
  </div>
  <div class="box4 box">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate possimus quidem consectetur, laborum quos sed?
  </div>
</div>

内容的提问来源于stack exchange，提问作者Nabeel Ahmed Mufti