为什么第一个div会沉下去一点？

Question

样式是这样的

为什么第一个div会沉下去一点呢？

Answer 1

文字部分没有定高

Answer 2

行内块元素（display:inline-block）会作为替换元素放在行中，它的底端默认地位于文本行的基线上，而且内部没有行分隔符，所以此处第一项内的文本的最后一行会与同一行的后面两项内的最后一行文本基于文本基线对齐，从而导致第一项的行内框整体下移了。
解决办法就是重置.item-box-xxx行内块元素的vertical-align值，设置为top或text-top
但这可能会导致第一项的价格一行比其它项目的价格信息位置高，所以最好给行内块元素设置position:relative,然后给价格元素设置绝对定位到底部

Answer 3

在内联元素会体现英文排版vertical-aligin,它默认是baseline，设置成vertical-align: bottomorvertical-align: toporvertical-align: middle，

Answer 4

inline-block可能行元素的baseline不一样导致上下不齐，所以解决的办法就是父元素设置统一的vertical-align属性，`
vertical-align: top;