html - CSS 的哪一部分导致文本中出现这种不需要的填充？

Question

请参阅此演示和下面粘贴的代码。

看看文本上方和下方如何有红色填充？

<div class="row">
  <div class="col-md-6 text-right">
    <img src="https://images.unsplash.com/photo-1565893542669-5c3a75107dc9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="couple" class="img-responsive" style="max-width: 400px;">
  </div>
  <div class="col-md-6 text-left">
    <h2 style="background: red; padding: 0; background: red; padding-top: 0; margin-top: 0;">
      TEXT
    </h2>
  </div>
</div>

我正在使用 Bootstrap，但不确定它与原因有关。

_{How can I remove space (margin) above HTML header? 在这里既没有解释也没有解决我的问题。例如，主要答案建议将边距设置为 0，我已经这样做了。}

标签： htmlcsstwitter-bootstrap

Answer 1

style="line-height: 0.8em;"会减少文本上方和下方的空间。这个空间被设置为文本本身的默认值（与 Bootstrap 无关）。这是为了确保文本可读。