两个非空的<div>元素inline-block化后出现空白部分解决办法

在涉及到两个<div>元素并列显示的效果时，一般有两种方法：

1.使用float元素让元素并联显示；

2.将块状的<div>元素display设置为inline-block，使其成为线性块状元素，从而具备线性元素的特点，达到并列显示目的；

由于float元素具有：脱离文本流以及使父元素高度塌陷的特性，谨防对后续布局产生影响，故不选用；

但是，将<div>元素inline-block化，由于两个元素遵循其默认的基线对齐的方式，故两个并列显示的<div>元素出现空白部分（如下图）

要解决这个问题，可：

1.将两个<div>元素display：inline-block后，将其vertical-align对齐方式设置为top或者bottom；

2.将第二个<div>元素设置样式：font-size：0；后期再对第二个<div>中的内容的字体分个设置即可；

效果图如下：

两个<div>元素已对齐；空白部分消失

巴特西