如何消除img标签与h3标签之间的间距？

我帮你排查了这个问题，其实你遇到的是行内元素基线对齐导致的默认空白，只设置margin和padding为0是不够的——原因在于<img>默认是行内替换元素，它会和文字的基线对齐，这就会在图片底部留下一小段空白，哪怕容器里看不到文字也会存在。

下面给你几个可行的解决方案：

• 方案一：将图片设置为块级元素
  把<img>的display属性改成block，这样它就不会遵循行内元素的对齐规则，空白自然就消失了：

  img {
    display: block;
    margin: 0;
    padding: 0;
  }
  

• 方案二：修改图片的垂直对齐方式
  给<img>设置vertical-align属性为top、middle或者bottom，打破默认的基线对齐逻辑：

  img {
    vertical-align: top;
    margin: 0;
    padding: 0;
  }
  

• 方案三：给父元素设置字体大小为0
  如果图片和h3在同一个父容器里，给父容器设置font-size: 0也能消除基线带来的空白（注意如果父容器里有其他文字，需要单独给文字重置字体大小）：

  .parent-container {
    font-size: 0;
  }
  .parent-container h3 {
    font-size: 16px; /* 根据需求重置h3的字体大小 */
  }
  

你可以优先试试方案一和方案二，这两个是最常用且不会影响其他元素的解决办法～

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