Please help to understand -extra space-using Firebug

[chickentulip]

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

[Mottie]

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 :)

[chickentulip]

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.

[TheDoc]

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.

[Senff]

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!

[wolfcry911]

// edit – too slow again :(

[chickentulip]

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

[Author]

Posts