为何60px的<img>出现7.5px底部外边距？控制台无记录

这个问题其实是CSS里一个非常常见的“小坑”——图片默认是行内替换元素，浏览器会按照文本的基线来对齐它，这就会在图片底部留下一小段预留空间（就是你看到的7.5px间距）。即使你没设置任何margin或padding，这个默认的对齐方式也会导致这个间隙出现；当你把img放进div后，这个间隙就变成了div的底部空白，因为div包裹了行内的img，继承了这个基线间距。

给你几种简单有效的解决方法，选一种适合你的就行：

方法1：把图片设置为块级元素 #

这是最直接的方案，修改#jqueryLogo的CSS，添加display: block;：

#logoDiv{ } 
#jqueryLogo{ 
  height: 60px; 
  padding: 0; 
  margin: 0; 
  display: block; /* 新增这行，消除基线间距 */
} 
/*vvv HEADER BELOW vvv*/ 
#header{ 
  height: 50px; 
  background-color: #05568D; 
  border-radius: 10px 10px 0px 0px; 
} 
#header > ul{ 
  list-style-type: none; 
  padding: 0px 20px 0px 20px; 
  margin: 0px; 
} 
#header > ul > li{ 
  padding: 0px 10px 0px 10px; 
  color: white; 
  font-size: 20px; 
  line-height: 54px; 
  float: left; 
}

方法2：修改图片的垂直对齐方式 #

如果不想把图片改成块级元素，可以调整它的垂直对齐属性，让它不按照基线对齐：

#jqueryLogo{ 
  height: 60px; 
  padding: 0; 
  margin: 0; 
  vertical-align: bottom; /* 或者top/middle都可以达到效果 */
} 

方法3：给父容器设置字体大小为0 #

给包裹图片的#logoDiv设置font-size: 0;，这样行内元素的基线间距就会被消除：

#logoDiv{ 
  font-size: 0; /* 新增这行 */
} 
#jqueryLogo{ 
  height: 60px; 
  padding: 0; 
  margin: 0; 
} 

效果验证 #

修改后再检查元素控制台，那个莫名的7.5px间距就会消失了。其中方法1是最常用的，因为它不会影响其他可能的行内布局需求，简单粗暴又有效。

内容的提问来源于stack exchange，提问作者J. Doe