2

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>
djvg
  • 5,523
  • 3
  • 36
  • 64
johntrepreneur
  • 3,956
  • 4
  • 33
  • 49

4 Answers4

1

I usually go for padding on the parent container. Then margin between the children. If I had an ul with 10 li children, for example, I'd add 10px padding to the ul, 10px margin-bottom to the li, and 0px margin-bottom to the li:last-of-type...

I don't know, it varies with the situation, and your interpretation of it, I guess. In my example, since I believe the space between the ul and the li belongs to the ul, I make it the ul's padding. The space between the lis belongs to them, so I make it their margins.

Not much of a help, huh?

djvg
  • 5,523
  • 3
  • 36
  • 64
João Paulo Macedo
  • 14,267
  • 4
  • 29
  • 39
  • Also, when you add the padding to the parent container, you'll always be sure that every child you add will be aligned where you want it to (assuming you're not adding margins to the children for the same purpose). – João Paulo Macedo Mar 29 '12 at 00:40
1

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.

Stephen P
  • 13,259
  • 2
  • 40
  • 61
  • Interesting answer. So my case is pretty basic. My parent is the main content section of the page layout (with side bar(s) and header/footer). My children would then just be all the divs I'm positioning inside and there are a few nested divs (children within children). Should the main content div have padding inside it to avoid the child divs from touching (assuming that is what I want and it needs to be consistent)? Or should I make sure all the different immediate children use the same margins/padding to keep their distance from the touching the edges of the parent main content div? – johntrepreneur Mar 29 '12 at 18:27
  • Seems repeititve and error prone to let the children all repeat it assuming its the same distance, so I would opt for spacing on the parent in that case. The only drawback from putting it on the parent (that I can think of) is that there might be circumstances where I want less spacing between parent and some odd child in which case, I'm out of luck. Thoughts? – johntrepreneur Mar 29 '12 at 18:28
  • The way I work it would not be repetitive or error prone because I might make all of those children, say, `
    ` and have a single style that says `.section { margin: 10px; }` (or `div.section` more specifically target). There might also be things like `
    ` so it's still a section and gets the margin, but gets other styles because it's also a `.tips`
     – Stephen P Mar 29 '12 at 21:12
  • After a full redesign of the pages in question, I've come to the conclusion that you're right and it all depends on the nodes in question. I started out with it on the parent by default, but often had to switch it around depending on the situation. – johntrepreneur Apr 01 '12 at 04:29
0

The CSS margin attribute is on the outside whereas padding is within the DIV block. I am not sure if that is what you want - documented here:

When to use margin vs padding in CSS

I just verified and the margin attribute does work inside a nested DIV also. So that is an alternative to padding.

IF, however, the position in the class is absolute, the padding shouldn't matter. But if you use absolute positions, all the DIV's would have to have absolute positions to avoid a potential conflict, and you would have to know the client's minimum screen size (absolute may not be a good idea).

NOTE: If any of your clients are still using IE5, that browser has a padding bug that was supposed to be fixed in IE6. http://forums.devshed.com/css-help-116/css-padding-inside-absolute-div-70789.html

Community
  • 1
  • 1
A B
  • 3,824
  • 1
  • 18
  • 23
  • Thanks for the explanation, but I know the difference between the two. What I am trying to understand, is whether it is a better CSS practice to provide the parent-child spacing from the parent via padding, or whether it is better to provide the spacing from the children via padding/margin. Either is possible if you look at the fiddle, but I'm after what is best practice. – johntrepreneur Mar 29 '12 at 00:13
  • If you are concerned about the vertical margins on your pages then the padding needs to be in the parent. I've observed this. http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html http://css.flepstudio.org/en/css-box-model/box-model-margin-collapse.html doctype.com/margin-child-element-moves-parent-element reference.sitepoint.com/css/collapsingmargins If you're trying to have this kind of pixel level control over what is on the page then the padding and/or margins in the parent would make sense. Having margins in the child can cause the parent to move around. – A B Mar 29 '12 at 16:16
0

Hi all i am not a HTML expert i am learner so what i have learnt from the web industry so i am sharing on the behalf of that.

According of me Padding is the inner space of an element, and margin is the outer space of an element.

Paddings :- If you will use padding in parent container than you will have to adjust width and height of the parent container otherwise parent will add the padding in his width & height.

Margins :- If you will use margins in child container than you don't need to touch the parent container width & height because child container will start from the required area.

or see your updated fiddle example i have played with margins in child container because when i used padding in parent container i adjusted the width & height of that but when i used margins don't need to adjust the parent container see the demo :- http://jsfiddle.net/WSTv6/1/

& can read more about margin & padding

Shailender Arora
  • 7,301
  • 2
  • 28
  • 33