设置border:0和padding:0后图片底部仍有间隙的问题求助

问题原因 #

<img>属于替换行内元素，默认的vertical-align属性值为baseline（基线对齐）。基线下方会预留出一部分空间，用于容纳字母的下伸部分（比如g、y这类字母的底部），这就是你看到的底部2px间隙——它和你设置的border:0、padding:0没有关系。

解决方法 #

• 修改图片的垂直对齐方式
  给图片设置vertical-align为bottom、top或middle，脱离基线对齐即可消除间隙：

  .thumb{
      width: 400px;
      vertical-align: bottom;
  }
  

• 将图片转为块级元素
  块级元素不存在行内元素的基线对齐特性，给图片添加display: block：

  .thumb{
      width: 400px;
      display: block;
  }
  

• 清空父容器的字体大小
  基线间隙的大小和父容器字体大小直接相关，给.container设置font-size: 0：

  .container{
      background-color: red;
      margin-left: 90px;
      margin-right: 90px;
      font-size: 0;
  }
  

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