css样式:a标签中使用img后的高度多了4px

由于img是行内元素,默认 display: inline; 它与文本的默认行为类似,下边缘是与基线(baseline)对齐而不是紧贴容器下边缘

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

其实解决方法不止一种:

  1. 给 a 设置 display: block;,然后给出高度
  2. 将 img 定义成 display:block;
  3. 给父级设置固定高度,然后 overflow:hidden
  4. 设置 font-size:0;
  5. 设置 img 的 vertical-align: bottom;
  6. 设置 img 的 margin-bottom: -4px;
  7. 消除掉匿名盒子的高度,也就是给a设置 line-height:0font-size:0;

参考:
https://blog.csdn.net/u013076574/article/details/79711884


原文出处:https://malaoshi.top/show_1IX5ZKJJKAal.html