如何移除div元素下方的白色横条？

问题描述 #

我的HTML代码如下：

<div class="image-overlay" style="margin:0">
  <img src="images/AboutMeBG.png" alt="About Me Image" style="width:100%;">
  <div class="image-overlay-text">
    <h2 class="stroke-text">My Projects</h2>
    <p class="stroke-text"><em>More Coming Soon...</em></p>
  </div>
</div>

这个.image-overlay元素下方出现了一条烦人的白色横条，我试过修改styles.css、添加margin属性都没解决，不知道该怎么移除。相关截图显示div下方存在一条横向空白区域。

常见原因及解决方案 #

这种白色横条大多是图片默认行内属性、文本元素外边距或容器样式导致的，直接试以下方案：

• 方案1：消除图片行内间隙
  img默认是行内块元素，会和文本基线对齐产生底部空白，改成块级元素即可：

  .image-overlay img {
    display: block;
    width: 100%;
  }
  

• 方案2：重置容器行高/字体大小
  行内元素的间隙和容器行高、字体大小相关，重置后可消除：

  .image-overlay {
    line-height: 0;
    /* 若用font-size:0，需给.image-overlay-text重新设置字体大小 */
  }
  

• 方案3：移除文本元素默认外边距
  h2、p标签自带默认margin，可能溢出容器产生空白，直接重置：

  .image-overlay-text h2,
  .image-overlay-text p {
    margin: 0;
  }
  

• 方案4：重置容器内边距/边框
  检查容器是否有默认padding或border，重置即可：

  .image-overlay {
    padding: 0;
    border: none;
  }
  

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