图片和行内块元素默认底线会和父级盒子的基线对齐,因此就会产生白色缝隙。
1.用vertical-align:middle | top| bottom等,让图片不和基线对齐。
上面3中对齐方式都可以
vertical-align不影响块级元素中的内容对齐,它只针对于行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片/表单与文字的对齐。
2.将img通过display: block转为块级元素。
转为块级元素之后,就不存在和父级盒子基线对齐的问题了。
原因是display:inline-block属性产生的间隙。display:inline-block是让元素在一行显示,但是这些元素在html里面是上下行排列的,所以中间有换行符,于是并排显示就有了换行符带来的空隙。
方案一:给元素设置float:left,缺点高度塌陷,要清除浮动。(推荐)
li{display:inline-blockpadding:5pxbackground-color:#ff6float:left}
.clr:after{clear:bothdisplay:blockoverflow:hiddenheight:0content:"."}
.clr{zoom:1}
<ul class="clr">
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">Javascript</a></li>
<li><a href="">XML</a></li>
</ul>
方案二:设置子元素的margin-left为负值,但是元素之间的间隙大小是根据上下文的字体大小确定的,而每个浏览器的换行空隙大小不同,如果font-szie:16px,chrome空隙为8px,火狐空隙为4px.所以这个方法不通用。
方案三:设置父元素 display:tableword-spacing:-1em目前这个方法可以完美解决,且兼容其他浏览器。