如何去除文本内容div顶部和底部的空白区域？

你遇到的这个上下空白，不是div的margin或padding导致的，而是浏览器渲染inline文本时的默认规则——字体本身有升部、降部，再加上默认行高（line-height）的影响，即使没手动设置，也会在div上下留出空间。下面是几种靠谱的解决办法：

方案1：匹配行高与字体大小 #

直接给.middle设置和font-size一致的line-height，让行高刚好包裹住文字，空白自然消失：

.middle {
  font-size: 50px;
  line-height: 50px; /* 关键：行高等于字体大小 */
}

你之前觉得这是临时办法，但其实这是最直接的方案，只要字体大小不变，就能稳定解决问题。

方案2：修改display属性消除inline特性 #

把文本容器改为块级或行内块级元素，打破inline文本的默认布局规则，再配合line-height: 1压缩行高：

.middle {
  font-size: 50px;
  display: inline-block; /* 或 display: flex */
  line-height: 1;
  width: 100%; /* 保持div的全屏宽度 */
}

方案3：调整垂直对齐方式 #

通过vertical-align让文字对齐到容器的顶部/底部，减少预留的空白空间，适合不需要严格控制行高的场景：

.middle {
  font-size: 50px;
  vertical-align: top; /* 或 bottom */
}

完整示例代码（方案1） #

.top {
  height: 20px;
  width: 100%;
  background-color: green;
}
.bottom {
  height: 20px;
  width: 100%;
  background-color: red;
}
.middle {
  font-size: 50px;
  line-height: 50px;
}

<div class="top"></div>
<div class="middle">HelloWorld</div>
<div class="bottom"></div>

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