Grow your CSS skills. Land your dream job.

Please help to understand -extra space-using Firebug

  • # July 22, 2012 at 10:04 am

    Using Firebug I was looking how the form
    http://www.skyrocket.be/lab/semantic_horizontal_form.html
    was made. I was wondering if someone on this forum, also could look at this form using Firebug and tell me
    where the extra space comes from between the legend and h3 in the fieldset id=”pt1″
    ??
    h3 has a height of 4em plus top and bottom margin: 1em.
    legend has a computed height of 72px;
    when i move the firebug arrow from legend to h3. There is still a space that does not belong as padding or margin to any of these elements.
    I would really love to know where it is coming from. If someone would be interested to have a look, I will appreciate it very much

    # July 22, 2012 at 10:12 am

    Hi chickentulip!

    I see a top and bottom margin on the h3. If you modify the css as follows, it should fix it:

    #theform fieldset h3 {
    font-size: 1em;
    height: 4em;
    margin: 0 0 1em;
    }

    If you look in Firebug on the right side, the default tab is Style. Switch to the Layout tab to see any set margin, border, padding, dimensions and other useful information :)

    # July 22, 2012 at 10:27 am

    Hi Mottie,
    you see, margins are highlighted in yellow in Firebug. when i point the firebug arrow on the h3 element, i see margin on the top and margin at the bottom. then i point to the legend and see the height of it. you can see that aside the margin on the top of h3 element, there is some more space between these two elements. i want to know what part of the existing code creates it.

    # July 22, 2012 at 3:11 pm

    All fieldsets have a padding of 1em, perhaps that’s simply what you’re seeing?

    Other than that, it appears that the h3′s margin butts right up against the form.

    # July 22, 2012 at 3:35 pm

    I guess you’re trying to figure out why there’s a space between the legend and the H3 if both of them would even have zero margin….? Meaning, there already is a space between them two because H3 has some top margin, but even without it, there would be more space.

    The reason is a little tricky. The fieldset has a padding over 1em (all sides), but the TOP padding is not applied right away at the top because of the LEGEND element, which is kinda “special”. By default, the LEGEND is placed ON the border of the fieldset, and so standard positioning rules don’t apply here.

    (I’m sure there’s a more scientific explanation to it, but I’m lost on that one).

    So, the 1em top padding that the fieldset has, is not applied until AFTER the LEGEND (which, in this case, is being ignored, or rather, skipped). Which explains the spacing between the LEGEND and the H3. If you’ll remove the (top) padding from the fieldset through Firebug, you’ll see the spacing disappear.

    Hope that makes sense!

    # July 22, 2012 at 4:33 pm

    // edit – too slow again :(

    # July 23, 2012 at 10:01 pm

    Thank you so much for all who replied to my post.
    special thanks to Senff

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".