同CSS属性的inline-block div为何会向下挤压按钮？

这事儿说白了就是inline-block元素默认的垂直对齐规则在搞怪！

为什么会出现挤压？ #

当你把元素设为display: inline-block时，浏览器默认给它的vertical-align属性值是baseline——意思是让这个元素的基线和父元素的基线对齐。但这里有个关键差异：

• 你的#test_div是非替换类型的inline-block元素，而且内部有文本内容，它的基线是内部文本（也就是"woops"）的基线（文字的底部边缘）。
• 而button属于替换元素（表单控件这类），它的基线默认是元素自身的底部边缘。

当这两种元素按照基线对齐时，div的文本基线要和button的底部对齐，自然就会把按钮往下挤，导致布局错位。

怎么解决？ #

只需要给所有这些inline-block元素统一设置vertical-align属性，覆盖默认的baseline就行。比如设置成top（让元素顶部对齐）、middle（垂直居中）或者bottom（底部对齐），根据你想要的视觉效果选择。

修改后的CSS代码（以vertical-align: top为例）：

.extras { 
  width:100%; 
  height:56px; 
  background-color:purple; 
  text-align: center; 
  overflow: auto; 
}
.extras button, #test_div { 
  display:inline-block; 
  width:110px; 
  height:55px; 
  background-color:green; 
  color:white; 
  font-size:16px; 
  font-weight: bold; 
  padding:0; 
  margin:0; 
  border:0; 
  cursor:pointer; 
  overflow:auto;
  vertical-align: top; /* 新增垂直对齐规则 */
}

这样修改后，div和按钮就会整齐地排列在同一行，不会再出现挤压的情况了。

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