3

More frequently then not I come across this issue. Generally I use padding instead of the margin or some quick solution to fix my problem but I too know this is not the correct fix.

Without going deep into writing my issue, I like create a fiddle for better understanding. So here is my fiddle.

.container-node {
    margin: 10px;
    background-color: #0f0;
}

.content-node {
    margin: 20px;
    background-color: #f00;
    padding: 5px;
    color:#fff;
}

.border {
    border:1px solid #00f;   
}

The issue that I'm trying to point out is if I've two divs, one inside the other and the inside div is given some margin, it takes the margin value differently if the container is bordered and differently if the container does not have a border.

I appreciate any help or documentation on this. Thanks

Rupam Datta
  • 1,760
  • 1
  • 20
  • 35

4 Answers4

2

http://www.w3.org/TR/CSS2/box.html Read carefully 8.3.1 Collapsing margins

Two margins are adjoining if and only if:

  • no line boxes, no clearance, no padding and no border separate them

The best solution of this ptoblem i know is clearfix. Its not giving padding or overflow but similar to it.

Fiddle

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
Community
  • 1
  • 1
Flops
  • 1,352
  • 14
  • 18
1

As already pointed out it is a "problem" with collapsing margins. A really good read about this issue can be found here:

http://reference.sitepoint.com/css/collapsingmargins

You could just add a padding of 1px and reduce the margin by 1 like so:

.container-node {
    margin: 9px;
    background-color: #0f0;
    padding: 1px;
}

Applied to your problem: http://jsfiddle.net/n65bX/1/

puelo
  • 3,607
  • 2
  • 30
  • 48
  • Great share. I'm excited to ask you if the same is correct if I don't set/want margin value to the container-node class. Probably I would be using negative margin. I'm afraid if it works across browsers. Please see the fiddle again without margin. – Rupam Datta Nov 21 '13 at 11:24
1

The .content-nodes margin doesn't work properly, it doesn't have an element to push from. With the border property you define the contour of the element(Based on the border, the margin can push from there).

To easially fix this, you can add a padding to your .container-node instead of the margin on .content-node:

.container-node {
    /*margin: 10px;*/
    padding: 20px;
    background-color: #0f0;
}

Also you are creating your yellow border with a margin. I would suggest you to use also padding for this on the proper element:

.root-node {
    border: 1px solid #bababb;
    background: #ff0;
    margin: 10px 0;
    padding: 10px;
}

with proper i mean to the relevant element. You gave an yellow background to .root-node element, so you should also define the size of that element on that element. It's far more logic to use it this way :)

When you want to create an inline spacing use padding, if you want it to go outside use margin.

jsFiddle

This might also be usefull: When to use margin vs padding in CSS

Update

So you may ask yourself: why isn't the element(.content-node) pushed away based on the parent(.container-node) element?

Well it's fairly simple why this happens. The margin still pushes the element(.content-node) away, only it's based on the wrong element(it is pushed from the .root-node). This is why your yellow border is bigger as the one with the border.

So why is it pushed at the root element?

To debug it even more; let's only set margin to the left and right of the .content-node:

 margin: 0 55px;

jsFiddle

It seems that only the top-margin didn't work. And it indeed seems that the margin is collapsing.

I found this topic about this matter: Why does this CSS margin-top style not work?

So i would suggest to use padding so margins aren't conflicting with each other (paddings can never interact in the same 'flow' with each other).

Community
  • 1
  • 1
nkmol
  • 7,706
  • 3
  • 25
  • 47
  • Thanks for the share. I've used padding in some of my solutions and they worked to a good extent. I already have mentioned it above. – Rupam Datta Nov 21 '13 at 11:33
  • 1
    Ugh sorry, i did not read that ^^ But i think that is the right use of padding. The margin needs to be pushed from an element, which it doesn't do. With padding it isn't related to any other element, it just adds padding to the inner. Where it looks to me you want to add spacing to the inner, instead of adding spacing to the outer. – nkmol Nov 21 '13 at 11:36
  • Yeah you are right in a way. But I come across an use case where I need to add space outside a box which means I should be using margin. Writing correct css is something that I want to do as long as possible keeping in mind the constraints. – Rupam Datta Nov 21 '13 at 11:40
  • I feel you. I stick with my answer as it doesn't need any 'fixes' or 'hacks' it just uses the right use of padding and margin. I will try to find some documentations related tot this though :) – nkmol Nov 21 '13 at 11:46
  • 1
    @RupamDatta The margin are indeed collapsing as stated by Flops. Check my update :) – nkmol Nov 21 '13 at 12:44
0

I will try to explain this the best I can.

In the element containing the "container-node", there is no 'area' for that container to give margin to.

By adding sample text before/after , you will see the margin working. Likewise, if you give the "container-node" a border or even padding, you will then provide that element with something for the "content-node" to position against.

C. S.
  • 789
  • 5
  • 6