Where to put paddings/margins

[Martin_Muzatko]

#Hi there!

I would like to ask you a question how you space elements around.

Example:
If I wan’t my page to be a bit spaced from top, for lets say about 20 Pixels, 1.5em or whatever floats your boat.
Will I assign a padding-bottom to my body or margin-top my section.page element?

In this case it sounds better and more clear to put the margin on the page section.
Maybe this is also more clear to understand for other developers working on the same project, when they try to find out where some padding/margin comes from.

Based on that I can create a “rule” saying: inner elements before outer.

What do you think about this?
Do you have another idea of this and got your own rules?

Please let me know :)

[Kitty Giraudel]

Whenever I can, I try to avoid top and left margin. They are “counter-flow”.

[Paulie_D]

I prefer adding top margin to my top element.

Not sure how padding on the body interacts with `box-sizing:border-box`

[CrocoDillon]

General rule: margin for spacing between elements, padding for spacing between an element and it contents.

I don’t agree with “inner elements before outer”, it depends on what you’re trying to achieve. For example you may have some container element your’re using on many pages (`

` in my case), but you want an edge around the containers content (which can be one or more elements, depending on page). If you want the edge to be the same no matter what, padding is the right choice. It’s more consistent and prevents you from needing to specify margin on every possible child element. If you want more flexibility you should go for padding or margin on the child elements.

Even if you don’t use backgrounds on those elements, it makes the choice between margin or padding sometimes more obvious if you think about how a background on an element would behave, maybe even add a background color just for prototyping.

[darrylm]

I try to avoid margins and use padding as much as possible to avoid issues such as this one I had before

https://css-tricks.com/forums/discussion/22100/unwanted-top-margin-in-firefox#Item_14

I also found if your background is a solid colour that borders can do an effective job

[Author]

Posts