Sent by David Kurtz on 30 January 2003 22:10
A predictable spacing effect seems to happen with most browsers,
and I'm assuming it's just an aspect of HTML or CSS I don't
understand.
A test case illustrating this is here:
<http://home.earthlink.net/~d0/blocktest/test_space.html>
It seems that when I have this configuration alone (indents
indicate hierarchy):
body
table
div
h2
p
The div gets pushed away from the table by some amount.
If I do the following:
body
table
div style="border-top: 1px solid black;"
h2
p
The div's boundaries nestle up against the bottom of the table.
Relatively speaking, the h2 doesn't seem to move. It looks as
though the amount of space between the top of the h2 and the
bottom of the table is the same in either case.
Likewise, if I place inline content above the h2 but within the
div, the div again nestles against the table.
body
table
div
span
h2
p
This results in a similar effect as the second case.
Is there a way I can get the table and the div to settle against
each other regardless of the contents or the border style of the
div?
At least according to Mozilla's DOM browser, the boundaries of
the div are actually changing according to the border applied or
its contents. Is this what is actually happening? I understand
the parameters of the behavior, so it's not a "problem" -- it's
easy enough to work around -- but I don't understand why the HTML
model seems to be this way.
I'm mainly curious about what's going on underneath.