如何消除inline-block元素与容器间距及图片下方空白？

AI 小北

2026-7-19

原始代码

CSS

.header {
  background-color: red;
}

.content {
  background-color: blue;
}

em {   
  display: inline-block;
  background-color: yellow;
}
img {
  display: block;
}

HTML

<div class="header">
  <em>
    <img src="https://placehold.co/60x60"/>
  </em>
</div>

<div class="Content">
  Some content
</div>

一、消除inline-block元素（`<em>`）与容器（`.header`）之间的间距

inline-block元素和容器的间距是浏览器将HTML中的换行/空白字符解析为空格导致的，常用解决方法如下：

给容器设置font-size: 0
空白字符的大小由容器字体大小决定，设为0可消除间距，同时记得给inline-block元素重置字体大小（若需要显示文本）：

.header {
  background-color: red;
  font-size: 0; /* 消除空白字符产生的间距 */
}

em {
  display: inline-block;
  background-color: yellow;
  font-size: 16px; /* 按需调整字体大小 */
}

使用Flex布局
给容器启用Flex布局，自动消除子元素间的空白间距，还能灵活控制对齐：
```
.header {
  background-color: red;
  display: flex;
}
```
移除HTML中的换行/空白
将<em>与容器标签写在同一行，去掉中间的换行和空格：
```
<div class="header"><em>
  <img src="https://placehold.co/60x60"/>
</em></div>
```

二、移除图片下方的空白空间

你已经给<img>设置了display: block，这已经解决了行内图片因基线对齐产生的下方空白。如果仍有空白，可补充以下处理：

清除<em>的默认内外边距
浏览器会给<em>等元素设置默认边距，手动清除即可：
```
em {
  display: inline-block;
  background-color: yellow;
  margin: 0;
  padding: 0;
}
```
调整容器的line-height
若容器line-height过大，会造成视觉上的空白，可设置为0或匹配元素高度：
```
.header {
  background-color: red;
  line-height: 0;
}
```