<分区>
html - 标题元素的高度超过预期
我这里有这个 html:
#books {
margin-top: 4rem;
} <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>关于我的问题的部分是 h2 标签，它位于结束数字标签的正下方，文本为“Widely Know For”。
我一直在尝试向该元素 (h2) 添加上边距，但没有成功。当我在调试器模式下打开它并选择这个元素时，它显示它的高度几乎延伸到页面的顶部，而不是延伸到它上面的元素的底部(图)。
只是为了看看，我把这个h2元素拿出来让它下面的div代替它。这个 div 没有同样的问题。它有一个正常的高度，我可以很好地为其添加上边距。
好像只是标题标签有这个问题。
我认为这个问题在某种程度上与 html 有关，但我不知道为什么。
这是代码笔的链接:http://codepen.io/edsonmendieta/pen/jqjRry
非常感谢您的帮助，谢谢。
最佳答案
问题是您正在跟随一个 float 元素。您需要应用一种或另一种技术来清除 float 。 See here .
最简单的选择可能是使用 Bootstrap 的内置清除类:
<div class="clearfix"></div>
<h2 class="text-center" id="books">Widely Known For</h2>
关于html - 标题元素的高度超过预期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37395319/