Padding on parent versus margin on child

Question

When I want to place some (logically meaningful) div inside a (logical) container div with some space apart as below,

Answer 1

There is no hard-and-fast rule on this, because it all depends on context, and in complex designs, you usually have no choice but to use one or the other to get the desired result.

That said, you should try to group logically related rules together. For instance, when you have two HTML elements on a website that serve a similiar purpose, e.g. your outer <div> and another similar box (that should get no padding), then, all else being equal, it is better to set a margin on the inner <div>.

If, however, you are placing more than one element into the outer <div>, then you should in fact use a padding, because that takes care of all inner elements at once. @zzzzBov's answer works as well, but it relies on margin collapsing, which can be tricky to deal with.

edit: In your second situation, I usually combine padding and margin, like this:

.outer {
    padding: 10px 15px 10px 5px
}

.inner {
    margin-left: 10px
}

Probably looks complicated, but works regardless of margin collapsing and has served me very well.

Answer 2

Consider what kind of gutter you want to add. Is it to seperate elements from each other? Is it to create space inside an element?

For gutter on all sides of an element, like the blue in your example:

Here, I'd use padding on the container. Logically, that's exactly what I want, so why consider anything else?

---

For gutter between elements on a row, like the space between the green elements in your second example:

Here, I'd use margin on the green elements. There's obviously a margin between them, so padding doesn't make a whole lot of sense.

---

When you use these two examples together, however, they create a problem where the margin on the green elements may be conflicting with their parent's padding. I manage this by removing the margins from the first and last children.

Additionally, you may want more of those fine, green elements on a new row. I usually clear on every row using an element wrapping the entire row with whatever appropriate method to clear the floats, so it makes a lot of sense to seperate the rows with a margin. Obviously, the same conflict with the parent's padding arises here, but it's easily handled in the same way (ie, removing the margin from the last row).

So, in short:

• Padding on parent elements for gutter between its edges and its children.
• Margin to seperate elements with the same parent from each other.
• Remove margins from said children when its margin connects to the parent's padding (the first and/or last children in a row, the last child in a column).

Disclaimer: This is how I do things. I can't promise it's the most efficient way to do things, but it's the way that makes the most sense to me.

Answer 3

I prefer to set margin on the div that resides inside the container.

Suppose the black div below is the outer container with display: flex, width: 300px and height: 200px. When you assign padding: 30px padding to the outer div, this will result in 360px in width and 260px in height. Given that you won't expect the container to stretch, this will affect the elements around the container div. Hence, it is better to use margin on the inner div.

When you assign margin between the inner div and the container, the actual outer div won't move, and the margin will only affect the inner div, thus not affecting the elements around it.

If you are using box-sizing: border-box; then things will change accordingly, so it totally depends on what actual size the elements has to be. Using margin/padding on the inner elements will be the right way.

Answer 4

It depends on how your subsequent content should render. If you're going to have multiple inner <div>s (green) separated by a similar amount of spacing, it will make sense to use margin so that the margin collapse allows the divs to render as:

+-------
|        <- blue
|  +----
|  |     <- green
|  |
|  +----
|
|  +----
|  |     <- green
|  |
|  +----
|
+-------

Here is an example of some of the various options.