PDA

View Full Version : basic css question > 'top' - 'margin-top'

[o_O]
01-24-2003, 01:32 AM
Regarding the 'top' & 'margin-top' properties.

I have this code:


<style>
.h4{
position: absolute;
left: 100px;
top: 43px;
}
.h5{
position: absolute;
margin-left: 200px;
margin-top: 43px;
}

</style>
</head>
<body>

<div class="h4"><strong>h4</strong> ( top: 43px; ) </div>

<div class="h5"><strong>h5</strong> ( margin-top: 43px )</div>

</body>

Which displays:
http://theory3.orcon.net.nz/css.gif


I don't understand why h4 is higher than the other, I would of thought that either they would both be the same hieight or that h5 would be higher?

Does 'top' sort of bypass the body margin or something, what am I missing?
I really want to be clear on this even though it's basic becuase i see it as very important in trying to build a layout with css only.
meow
01-24-2003, 02:01 AM
Two things. Margins on absolutely positioned blocks don't collapse with other margins. See:

http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position

So the h5 that doesn't use any positioning parameters will be affected by the browser's default margin on BODY. The default margins on h4 and h5 also come into play.

Try this:

body { margin: 0; padding: 0 }

#param{
position: absolute;
left: 100px;
top: 43px;
}
#marg{
position: absolute;
margin-left: 200px;
margin-top: 43px;

-------

<div id="param">param</div>
<div id="marg">marg</div>
[o_O]
01-24-2003, 03:05 AM
well i'm a little bit closer to understanding. :)


h5 that doesn't use positioning parameters

Aren't these positioning parameters?:

h5{
position: absolute;
margin-left: 200px;
margin-top: 43px;
}
meow
01-24-2003, 03:18 AM
Nope. They are margins. 'top', left', 'bottom', 'right' are used for positioning.

Since you don't have parameters (that's OK AFAIK) the element will be absolutely positioned but in the same spot where it is in the normal flow. The browser applies a margin to body, you apply one to h5. They add up.

In the other case where you don't use margins and do use parameters the element will be positioned relative the edge of it's containing block (the browser window in this case) without concern to the body margin/padding.
meow
01-24-2003, 03:35 AM
Another thing... :p

If the h5 hadn't been absolutely positioned the top margin you gave it would have collapsed with the body margin since that's what adjacent vertical margins normally do (no border or padding separate them) and the 'total margin' would have been equal to the largest of them, 43px. 'position: abolute' doesn't let the margins collapse.

Isn't the box model fun? :D
[o_O]
01-24-2003, 04:37 AM
I can think of other words for it. ;)

Thanks for the info.
pb&j
01-24-2003, 06:22 AM
Originally posted by [o_O]
Regarding the 'top' & 'margin-top' properties.
I have this code:
.h4{
position: absolute;
left: 100px;
top: 43px;
}
.h5{
position: absolute;
margin-left: 200px;
margin-top: 43px;
}


This is a guess as its been a while...

h4 is being absolute positioned from the top left corner of the screen, thus 100 pixels from the left border, 43 pixels from the top border.

h5 would be absolute positioned, but there are no accompanying properties for it. Margin left and top are referencing the actual margins around the object, thus putting a buffer space of 200 pixels to the left of the h5 text and 43 pixels above the h5 text. I think the h5 text is lower because it is within a DIV area which is a block element, thus showing on the next available full line, thus just a line below the previous DIV holding the h4 text.