为何使用display:inline-block会使DIV下移？float:left却可顶部对齐

嗨，这个问题其实是行内块元素的默认对齐规则在搞鬼！咱们一步步拆解清楚：

• float:left的对齐逻辑
  当你给元素设置float:left时，元素会脱离正常的文档流，并且会自动向容器的顶部、左侧靠拢。只要容器宽度足够，多个浮动元素的顶部都会对齐到同一水平线，完全不会受内部文本或元素的基线影响——这就是你用float时两个DIV能完美顶对齐的原因。

• display:inline-block的默认坑点
  而inline-block元素本质属于行内级元素范畴，它的默认对齐方式是基线对齐（baseline）。基线指的是文本（比如小写字母"x"）的底部基准线。你看你的第一个DIV#p1里有多个<p>标签，里面的文本会形成自己的基线；第二个DIV#img1里的"img"文本，会默认和#p1的基线对齐，这就导致#img1看起来被向下推了——它在对齐基线，而不是顶部。

快速解决办法 #

要让inline-block元素也实现顶部对齐，只需要给它们加上vertical-align: top属性就行。比如在你的test.css里写：

#p1, #img1 {
  display: inline-block;
  vertical-align: top;
  /* 可以再加个宽度，确保元素不会挤在一起 */
  width: 45%;
}

这样两个DIV就会以顶部为基准对齐，效果和float:left一致啦。

另外提个小细节：有时候inline-block元素之间会出现莫名的间隙，这是因为HTML里的换行/空格被解析成了空白字符。如果遇到这个问题，要么把两个DIV的标签写在同一行，要么给它们的父元素设置font-size: 0，再给子元素单独恢复字体大小就行。

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