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,

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.