Home/ Questions/Q 7714543
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T02:09:19+00:00

I’m struggling to determine where in my CSS the padding/margins should go to keep

  • 0

I’m struggling to determine where in my CSS the padding/margins should go to keep seperation between parent and child containers. For example, if you have have a parent div with two nested children and you need to have even 10px spacing between the children and also have the children be spaced 10px from the parent; then would you add padding to parent div {padding:10px} and then just add 10px of margin between the children? Or would you leave the parent at 0 padding and have the children define what separation they need from each other and also their parents?

Here’s the original fiddle showing both examples, and a snippet showing the same thing

.parent1 { /*spaces itself from its children*/
    display: inline-block;
    padding: 10px;
    font-size: 0;
    border: 1px solid red;
}
.child1 {
    display: inline-block;
    margin-right: 10px;
    font-size: 12pt;
    border: 1px solid blue;
}
.child2 {
    display: inline-block;
    font-size: 12pt;
    border: 1px solid green;
}
.parent2 { /*has not spacing from its children*/
    display: inline-block;
    font-size: 0;
    border: 1px solid red;
}
.child3 {
    display: inline-block;
    margin: 10px;
    font-size: 12pt;
    border: 1px solid blue;
}
.child4 {
    display: inline-block;
    margin-right: 10px;
    font-size: 12pt;
    border: 1px solid green;
}
<div class="parent1">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
</div>
<br/>
<br/>
<div class="parent2">
    <div class="child3">child3</div>
    <div class="child4">child4</div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    For me it depends entirely on the semantic meaning of the nodes in question — what is the parent, what are the children?

    Does the parent “want” space within it to keep its content away from its borders (padding)? Or do the children “want” distance between and amongst themselves and their parent (margin)?

    The answers to those questions are based on the purpose each node serves (I’m big into semantic markup and avoid presentational markup)

    In your case, without knowing further meaning, it sounds like the children want to be 10px from everything, so I would give them margin: 10px; on all sides. The margin collapse between the two children would leave only the 10px gap there, and they’d be 10px away from everything else surrounding them.

    • 0