如何移除img元素默认行为？解决img与红线间默认间距问题

原因 #

你遇到的这个额外间距不是margin导致的，核心原因是<img>属于行内替换元素，浏览器默认会将它与文本的基线对齐，基线下方会预留一小段空间（用于容纳g、y这类下沉字母），这就是你看到的默认间距，所以设置margin-bottom:0不会有效果。

解决方法 #

可以通过以下任意一种方式消除这个默认间距，之后再设置margin-bottom:16px就能得到精确的目标间距：

• 将img设为块级元素，脱离行内流的基线对齐规则：

  img {
    display: block;
  }
  

• 修改img的垂直对齐方式，不再和基线对齐：

  img {
    vertical-align: bottom; /* top、middle也可达到同样效果 */
  }
  

• 给img的父元素设置line-height:0，压缩基线下方的预留空间：

  .img-container {
    line-height: 0;
  }
  

内容的提问来源于stack exchange，提问作者Leopoldo Moreira