页面间隙消除
两个宽度为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让他们垂直方向居中