Margin Information

What Do the numbers represent...

[True_Life]

Can someone tell me in the css

{
margin: 0 0 0 0;
}

What does each number represent, specifically.

Thanks in advance...

[Dabrowski]

ooo an easy one, I can do those!

Let me give you some examples:

margin: top left bottom right;
margin: 1em 2px 3% 0;

margin: top&bottom left&right;
margin: 1em 2em;

margin: all;
margin: 10px;

You can see the order there, and that you can mix and match units as you please. Note, you don't need a unit on 0, it's always 0 whatever your measurement!

[Fotiman]

ooo an easy one, I can do those!

Hahaha... except that you got it wrong! ;-)

The order is:
top right bottom left

NOT
top left bottom right

[w3.org...]

[SuzyUK]

Hey, True_Life - Welcome to WebmasterWorld!

there's not normally any TRouBLe about these boards, and that's the handy mnemonic [en.wikipedia.org] for remembering the shorthand order of margins, borders, padding etc.. :)

or I used to remember it clockwise, on a clock face - 12:3:6:9

btw.. there is one more that was left out..

margin: 0 10px 0;

three values is read - Top : Right & Left : Bottom

[Xapti]

Best way to remember I'd say is clockwise. It's logically valid for all the types.

[Dabrowski]

Hahaha... except that you got it wrong! ;-)

The order is:
top right bottom left

D'oh! Can't believe I wrote that wrong! I did know the order. Sorry True_Life.

there's not normally any TRouBLe about these boards, and that's the handy mnemonic for remembering the shorthand order of margins, borders, padding etc.. :)

You could also use:
The Irish TRade in BLarneystones

Or:
Don't eat the TRopical BLowfish, you'll die

Now you'll remember it! :D

or I used to remember it clockwise, on a clock face

That's probably a better example. Works for Margin, Padding, and I think border styles, although I've never used it for that.

[edited by: Dabrowski at 12:01 pm (utc) on June 8, 2007]

[TheDesigner]

I am having a margin issue of my own.

I am kind of new to laying out website with CSS so forgive me if this is a dumb question.

My doctype is XHTML 1.0 transitional.

My problem is that I have a header div within a main "wrapper" div that holds all of the other divs.

For example:
<div id="wrapper">
<div id="header"></div>
</div>

I set up a margin of 10px to be the whole way around the header. In firefox it gives a margin to the wrapper div as well as the header. I only want the header to have the 10px margin. It doesn't do that in IE7. So I am wondering who is right and what am I doing wrong?

[Robin_reala]

This is probably due to collapsing margins - in the absence of any padding or border on the top of #wrapper the top margin of #header will collapse through. The solution? Change the top 10px of margin on #header to be 10px of padding on the top of #wrapper.

[Veil]

Also remember that the page by itself has a default margin.

Try

html, body {
margin: 0;
padding: 0;
}

If your page starts with #wrapper, it could look like #wrapper has a margin.

[edited by: Veil at 10:33 pm (utc) on June 9, 2007]

[TheDesigner]

yeah, I took care of the default margin.