由于img是行内元素,默认 display: inline
; 它与文本的默认行为类似,下边缘是与基线(baseline)对齐,而不是紧贴容器下边缘。
将displayp设置为block即可消除4px的bug。
其实解决方法不止一种:
- 给 a 设置
display: block;
,然后给出高度 - 将 img 定义成
display:block;
- 给父级设置固定高度,然后 overflow:hidden
- 设置
font-size:0;
- 设置 img 的
vertical-align: bottom;
- 设置 img 的
margin-bottom: -4px;
- 消除掉匿名盒子的高度,也就是给a设置
line-height:0
或font-size:0;
参考:
https://blog.csdn.net/u013076574/article/details/79711884