Hello All,
I'm confused about how top-margin works in a block formatting context. In the
attached file there is a DIV ('has-margin') inside of another DIV ('container').
The top content edge of has-margin is aligned with the top content edge of
'container'. This is not what I expect: I expect the top outer (i.e. margin)
edge of 'has-margin' to align with 'container'.
If one views the attached file in either Firefox or Chrome, one sees the margin
of 'has-margin' “pushes” 'container' down, rather than creating space within
'container'. This creates a white strip at the top of the page that is
eliminated by removing the margin.
There are plenty of ways to get the desired effect: e.g. if 'has-margin' is set
to absolute position with top: 0px this aligns its top margin edge with the top
content edge of 'container', but I want to understand why the example doesn't
work as I expect.
The w3c page on this[1] says
“In a block formatting context, boxes are laid out one after the other,
vertically, beginning at the top of a containing block.”
which seems ambiguous to me. Can somebody explain to me what is going on in my
example?
Thank you in advance,
--
med vänlig hälsning
David JH
[1] http://www.w3.org/TR/CSS2/visuren.html#block-formatting
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
