Padding on parent versus margin on child - html

Question

When I want to place some (logically meaningful) div inside a (logical) container div with some space apart as below,
which of the two ways would be more logically correct?
Set the padding property of the container
Set the margin property of the div that is inside
Sometimes, I have more than one element in the container like this:
For such cases, I would need to set the space between the elements independently from the space surrounding the elements. For the space between, I cannot use the padding property of the container, and I have to go with the margin (-left or -right) of the elements inside. Taking this into consideration, for setting the space between the container and the elements, I am wondering whether it makes more sense to set the margin (-left, -right, -top, -bottom) of the elements or the padding of the container.
I use flexbox. And I also have the setting as box-sizing: border-box;. I am free to use CSS selectors such nth-child if necessary.

Answer 1

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 2

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 3

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 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.