标题标签的高度很大？

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标记，其文本为“广泛了解”。

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

只是为了看，我拿出了这个h2元素，以便它下面的div取而代之。这个div没有同样的问题。它有一个正常的高度，我能够添加一个上边距就好了。

似乎只是标题标签出现此问题。

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

以下是codepen的链接：http://codepen.io/edsonmendieta/pen/jqjRry

非常感谢帮助，谢谢。

Answer 1

问题在于您是否遵循浮动元素。您需要应用一种或另一种技术来清除浮动。 See here。

最简单的选择可能是使用Bootstrap的内置清算类：

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

Answer 2

EDITED - 不同的解决方案：

.col-lg-12上方figure所拥有的引导类＆＃34; h2具有float: left;。浮动元素不会计算到父元素的高度。

从figure元素中删除该类 - 这将解决此问题，并允许您更改h2元素的上边距和距离。

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