如何移除图片下方空白？需保留doctype且.container为inline-block

这个问题我之前也踩过坑！根源在于标准模式（DOCTYPE存在时）下inline-block元素的默认垂直对齐方式是baseline——浏览器会为这类元素底部预留出一小段空间，用来容纳文字基线下方的部分（比如字母g、y的下半截），哪怕容器里没有文字，这个空白也会顽固存在。

既然你需要保留DOCTYPE，而且不能把.container改成block，给你几个可靠的解决方案：

方案1：设置vertical-align对齐方式（最推荐） #

给.container添加vertical-align: top（或者middle/bottom都可以），直接改变对齐规则，空白会立刻消失：

.container {
  display: inline-block;
  width: 100%;
  background: #000;
  color: #fff;
  vertical-align: top; /* 新增这行 */
}

这个方法最省心，完全不影响容器内的文字布局，第二个带“123”的容器也能正常显示。

方案2：设置line-height为0 #

通过把容器的行高设为0，消除基线相关的空白空间：

.container {
  display: inline-block;
  width: 100%;
  background: #000;
  color: #fff;
  line-height: 0; /* 新增这行 */
}

注意：如果容器内有文字（比如第二个容器的“123”），需要单独给文字元素恢复行高，比如：

.container {
  line-height: 0;
}
.container .text-content {
  line-height: 1.5; /* 恢复正常行高 */
}

方案3：设置font-size为0 #

和行高的思路类似，通过把容器的字号设为0来消除空白，之后再给内部文字恢复字号：

.container {
  display: inline-block;
  width: 100%;
  background: #000;
  color: #fff;
  font-size: 0; /* 新增这行 */
}
.container {
  font-size: 16px; /* 给文字恢复默认字号 */
}

这个方法需要额外处理文字字号，不如方案1便捷。

优先试方案1，应该能完美解决你的问题～

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