标题元素的高度超过预期

Question

我这里有 html：

<div class="row">
  <div class="col-lg-10 col-lg-offset-1 well">
    <h1 class="text-center">Brian Jacques</h1>
    <h3 class="text-center"><i>The scribe who was an abbot to all his readers</i></h3>
    <figure class="figure col-lg-12">
      <div class="img-thumbnail col-lg-10 col-lg-offset-1">
        <img src="http://i1378.photobucket.com/albums/ah88/ejacobosaur/Brian%20Jacques%20Cartoonized_zpsz412eynr.jpg" class="img-responsive figure-img img-fluid" alt="Brian Jacques cartoon">
        <figcaption class="figure-caption text-center">Jacques smiling. A radiance that shines through his books. Painted by Derek Wehrwein. </figcaption>
      </div>
    </figure>

    <h2 class="text-center" id="books">Widely Known For
    </h2>
    <div class="row">
      <div class="col-lg-6 text-center">
        <a href="https://en.wikipedia.org/wiki/Redwall" class="btn btn-info btn-lg" role="button" target="_blank">Redwall</a>
      </div>
      <div class="col-lg-6 text-center">
        <a href="https://en.wikipedia.org/wiki/Castaways_of_the_Flying_Dutchman" class="btn btn-info btn-lg" role="button" target="_blank">Castaways of the Flying Dutchman</a>
      </div>
    </div>
    <blockquote>
      <p class="text-center lead"><em>"So here is my story, may it bring<br>Some smiles and a tear or so,<br>It happened once upon a time,<br>Far away, and long ago,<br>Outside the night wind keens and wails,<br>Come listen to me, the Teller of Tales!"</em></p>
      <footer class="text-center">Brian Jacques,<cite title="Lord Brocktree"> Lord Brocktree</cite></footer>
    </blockquote>
  </div>
</div>

这是CSS：

#books {
    margin-top: 4rem;
}

关于我的问题的部分是 h2 标签，它位于结束数字标签的正下方，文本为 "Widely Know For"。

我一直在尝试为此元素 (h2) 添加上边距，但没有成功。当我在调试器模式下打开它并 select 这个元素时，它显示它的高度几乎延伸到页面的顶部，而不是延伸到它上面的元素的底部（图）。

为了看看，我把这个h2元素去掉了，让下面的div代替了。这个div没有同样的问题。它有一个正常的高度，我可以很好地为它添加上边距。

好像只是标题标签有这个问题。

我认为这个问题在某种程度上与 html 有关，但我不知道为什么。

这是代码笔的 link：http://codepen.io/edsonmendieta/pen/jqjRry

非常感谢帮助，谢谢。

Answer 1

问题是您跟随的是浮动元素。您需要应用一种或另一种技术来清除浮动。 See here。

最简单的选择可能是使用 Bootstrap 的内置清除 class:

<div class="clearfix"></div>
<h2 class="text-center" id="books">Widely Known For</h2>

Answer 2

你h2上面的figure有bootstrapclass.col-lg-12，有float: left;。浮动元素不计入父元素的高度。

从 figure 元素中删除 class - 这将修复它并让您更改 h2 元素的上边距和距离。

http://codepen.io/anon/pen/WwVdPO

标题元素的高度超过预期

Height of heading element is more than expected

html

css

margin