Margin or Padding?
Are there any rules governing the choice of whether you add a margin or a padding to an element in an html web page?.
For example, positioning divs I would use margins however for or
Also, unordered lists. If you wish to position the list within a div can you apply the positioning to the
- element. This doesn't seem to work for me and I usually end up adding the positioning to the
- elements instead.
Cheers
Megan posted this at 13:41 — 5th April 2007.
She has: 11,421 posts
Joined: Jun 1999
The difference bettween margin and padding is really quite a fine line. Padding is inside the border, margin is outside. I don't think the spec ever actually says anything about when to use one or the other. You can just ask yourself: Does this space go inside or outside? One test would be if you had a background or border on the element - the margin would be outside of the background or border.
That probably doesn't help much - it's mainly at your discretion. I tend to use either depending on the situation (and which one actually works best).
For your last question - are you still talking about positioning the list with margins? We're not talking about absolute or relative positioning, right? Just making sure.
Lists are a little funny because browsers treat the margin and padding differently. IE puts the bullets in the margin area outside of the box. Opera and Firefox put the bullets in the padding area. See this example:
http://admmail.uwaterloo.ca/~mjjack/demos/list_boxmodel.html
Megan
Connect with us on Facebook!
aka Rohan posted this at 14:43 — 5th April 2007.
He has: 200 posts
Joined: Feb 2006
OK yeah that last bit wasn't very clear. Yeah I was referring to positioning a bog standard 'list' using margins/padding in a bog standard div. Thanks, that clears a few things up, and that's a handy link too.
Nah that's cracking stuff, thanks for the help
pr0gr4mm3r posted this at 17:08 — 5th April 2007.
He has: 1,502 posts
Joined: Sep 2006
This cheat sheet has a good graphical representation of the difference.
http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/
aka Rohan posted this at 18:45 — 5th April 2007.
He has: 200 posts
Joined: Feb 2006
Hey that's a pretty sweet sheet pr0gr4mm3r. Cheers for that, I'll have to print that out later.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.