You failed to state that .container should have no margin.
I have added some content that hopefully will make this clearer...
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'>
<html>
<head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
.container {
background: black;
color: white;
margin: 0px;
padding: 0px;
}
.has-margin {
margin-top: 100px;
background: red;
}
</style>
</head>
<body>
<div class="container">
<!-- now black space has no top margin but red space does
--> Black
<div class="has-margin"> test has-margin and inherits color
from black space</div>
</div>
<div class="has-margin"> second has marging outside of
container test has-margin</div>
</body>
</html>
On May 3, 10:47 am, "David J. Hamilton" <[email protected]> wrote:
> 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]
>
> margin.html
> < 1KViewDownload
--
--
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]
