css解决并排的内联区块不对齐的问题

css解决并排的内联区块不对齐的问题

问题分析：两个并排的inline-block在同一行并排的时候，经常出现后面的一个块要比前一个靠下，这里用margin和padding都无法解决该问题。

解决方法：在两个区块里面重新定义vertical-align属性

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

 

参考资料：CSS 块级元素中嵌入内联元素产生间距问题