求助：如何清除HTML中top与middle两个div之间的空白

嘿，我来帮你搞定这个问题！这种两个块级div之间莫名出现空白的情况我碰到过好多次，主要有几个常见的原因和对应的解决办法，你可以挨个试试：

1. HTML代码中的换行/空格导致的空白 #

你写的代码里，</div>和<div class="middle">之间有空格或者换行，浏览器会把这些空白字符解析成一个可见的空隙，这是最常见的原因。

解决办法有两种：

• 直接把两个div的标签挤在一起，去掉中间的空格和换行：

<div class="container">
  <div class="top"> </div><div class="middle"> </div>
</div>

• 给容器设置font-size: 0;，然后在内部的div里重置回需要的字体大小（这样空白字符就不会被渲染出来）：

.container {
  font-size: 0;
}
.top, .middle {
  font-size: 16px; /* 改成你实际需要的字体大小 */
}

2. 元素默认或自定义的外边距（margin）导致间隙 #

虽然div默认的margin是0，但如果你的.top设置了margin-bottom，或者.middle设置了margin-top，也会产生空白。另外如果div内部有文本、图片等元素，可能会触发外边距折叠的问题。

解决办法：

• 检查你的CSS代码，清除掉多余的外边距：

.top {
  margin-bottom: 0; /* 清除top的底部外边距 */
}
.middle {
  margin-top: 0; /* 清除middle的顶部外边距 */
}

3. 元素设置为inline-block时的空白 #

如果你的.top或.middle被设置成了display: inline-block;，标签之间的空格同样会产生空白。这时候除了用上面的font-size: 0方法，还可以给元素加上vertical-align: top;来对齐，同时去掉标签间的空格。

你可以先检查一下你的代码属于哪种情况，优先试试第一种方法，大概率能解决问题！

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