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