img下有4px的留白

发表于 更新于 阅读次数： 本文字数： 258 阅读时长 ≈ 1 分钟

img竖排显示时下方有4px的留白
由于img是行内元素，默认display: inline; 它与文本的默认行为类似，下边缘是与基线（baseline）对齐，而不是紧贴容器下边缘。

将displayp设置为block即可消除4px的bug。

其实解决方法不止一种：
1.将图像定义成 img:{display:block;}
2.给父级设置固定高度，然后 overflow:hidden
3.设置 font-size:0;
4.设置 img 的 vertical-align: bottom;
5.设置 img 的 margin-bottom: -4px;