Height of heading element is more than expected

Question

I've got this html here:

    #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>

The part concerning my question is the h2 tag that is directly under the closing figure tag and has the text "Widely Know For".

I've been trying to add top margin to this element (h2) but have had no success. When I opened it up in debugger mode and select this element, it shows that its height extends almost to the top of the page instead of to the bottom of the element above it (figure).

Just to see, I took out this h2 element so that the div under it took its place. This div did not have the same problem. It had a normal height and I was able to add a top margin to it just fine.

It seems to be just the heading tag that has this problem.

I'm thinking the issue has to do with the html in some way but I have no idea why.

Here's the link to the codepen:http://codepen.io/edsonmendieta/pen/jqjRry

Help is greatly appreciated, thank you.

Your fiddle does not contain the id `books` to the `h2` per your css above. Add that and it works - https://jsfiddle.net/3s3za2g1/1/ — Abhitalks, May 23 '16 at 15:58
like @isherwood said I don't see any issue [Fiddle](https://jsfiddle.net/2er5ujy6/) — dippas, May 23 '16 at 15:58
@isherwood I accidentally deleted your fiddle thinking it was my link for some reason. Yeah, the problem doesn't occur. I'm using Codepen, so I'm guessing the issue is not the code but how Codepen is displaying it. — Edson, May 23 '16 at 16:00
@isherwood: Yes, I know. Looking at their fiddle, I just suspected that the Op might be styling using the id selector, but forgot to specify the id to the element in the code. — Abhitalks, May 23 '16 at 16:04
@all - Thanks guys for your help, it seems to be just a false bug as a result of the way it's displayed in Codepen. In these situations does the OP delete the question? — Edson, May 23 '16 at 16:07
@all - Jk, there was an issue and now it's fixed. Thanks guys for the help and sorry for any confusion. :) — Edson, May 23 '16 at 16:18

score 2 · Accepted Answer · edited May 23 '17 at 12:07

2

The problem is that you're following a floated element. You'll need to apply one technique or another to clear the float. See here.

The simplest option is probably to use Bootstrap's built-in clearing class:

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

edited May 23 '17 at 12:07

Community

1
1

answered May 23 '16 at 16:03

isherwood

58,414
16
114
157

score 0 · Answer 2 · edited Oct 16 '20 at 13:09

0

The bootstrap class .col-lg-12 which the figure above your h2 has, has float: left;. Floated elements are not calculated into the parent element 's height.

Remove that class from the figure element - this will fix it and let you change the top margin and distance of your h2 element.

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

edited Oct 16 '20 at 13:09

isherwood

58,414
16
114
157

answered May 23 '16 at 16:07

Johannes

64,305
18
73
130

I tried this, but it didn't work for me. Using the .clearfix bootstrap class in a div before the h2 tag solved the issue though, but thanks for your help. – Edson May 23 '16 at 16:19

Height of heading element is more than expected

2 Answers2