display:inline-block引起的页面布局问题

页面间隙消除

两个宽度为50%的display：inline-block元素并排放置我们会发现它们会出现间隙，从而导致界面展示的达不到预期效果，以下就介绍几种常见的消除方法：

1.代码格式

将这两个元素的html代码并排书写（两个元素间不存在着换行）

缺点：代码样式比较的糟糕。

2.font-size

在父元素设置font-size:0

缺点：在子元素中我们需要重新定义font-size属性

3.margin

在子元素上我们通过将margin设置为负值

缺点：margin的值和字体的大小有关，不够统一

4.float

缺点：会导致高度坍塌的问题

解决办法：

（1）将父元素的高度设置为固定值

（2）在父元素最后添加

<div style="clear:both"><div>
           

（3）利用css3伪元素的属性

::after{content:"";display:block;clear:both}
           

附加

当两个元素的高度不同的时候，默认的是底部对齐，当他们中包含子元素时，二者的位置将会发生变动，可以使用vertical-align:middle让他们垂直方向居中