Why Is Padding to a Wrapper Div Looks Different The Margin to an Inner Div

Why is padding to a wrapper div looks different the margin to an inner div?

In the first case, the unexpected behaviour you're experiencing is due to "collapsing margins".

The spec:

• http://www.w3.org/TR/CSS2/box.html#collapsing-margins
• http://www.w3.org/TR/css3-box/#collapsing-margins

Some easier reads:

• http://complexspiral.com/publications/uncollapsing-margins/
• http://reference.sitepoint.com/css/collapsingmargins
• http://www.howtocreate.co.uk/tutorials/css/margincollapsing

You could fix it by:

• Using padding on #number1 instead of margin on #number2, as you've done in your question.
• Adding overflow: hidden to #number1: http://jsfiddle.net/thirtydot/EWeDE/1/
• Adding some padding to #number1: http://jsfiddle.net/thirtydot/EWeDE/2/
• Adding float: left; width: 100% to #number1: http://jsfiddle.net/thirtydot/EWeDE/3/
• Adding display: inline-block; width: 100%; to #number1: http://jsfiddle.net/thirtydot/EWeDE/4/
• Adding a border to #number1: http://jsfiddle.net/thirtydot/EWeDE/5/
• I'm sure there are more ways.

Margin of inner Div affects outer div

Seems like it's a "Margin collapsing" problem. Check the DEMO

I've added padding: 1px 0;

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

Just found this: margin-top in a nested div

What is the difference between `margin` and `padding` in CSS?

TL;DR: By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box.

To me, the biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn't.

Consider two elements one above the other each with padding of 1em. This padding is considered to be part of the element and is always preserved.

So you will end up with the content of the first element, followed by the padding of the first element, followed by the padding of the second, followed by the content of the second element.

Thus the content of the two elements will end up being 2em apart.

Now replace that padding with 1em margin. Margins are considered to be outside of the element, and margins of adjacent items will overlap.

So in this example, you will end up with the content of the first element followed by 1em of combined margin followed by the content of the second element. So the content of the two elements is only 1em apart.

This can be really useful when you know that you want to say 1em of spacing around an element, regardless of what element it is next to.

The other two big differences are that padding is included in the click region and background color/image, but not the margin.

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }div.padding > div { padding-top: 20px; }div.margin > div { margin-top: 20px; }

<h3>Default</h3><div class="box">  <div>A</div>  <div>B</div>  <div>C</div></div>
<h3>padding-top: 20px</h3><div class="box padding">  <div>A</div>  <div>B</div>  <div>C</div></div>
<h3>margin-top: 20px; </h3><div class="box margin">  <div>A</div>  <div>B</div>  <div>C</div></div>

HTML DIV and padding issue

you can use the css3 -moz-box-sizing: border-box; property for your desired results and it will not affect your width & height...with the use of padding...

HTML

<div>demo demo</div>

CSS

div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
    background: none repeat scroll 0 0 red;
    height: 150px;
    padding: 10px;
    width: 150px;
}

see the demo:- http://jsfiddle.net/qpdsZ/10/

Inner div resizing outer div with margins

A quick workaround is to use, on the outer div:

overflow:auto,

or

padding-top:1px; margin-top:-1px;

The way margin works on inner divs is counter intuitive. It's discussed by much cleverer people than myself here:

Margin on child element moves parent element

If you read the comments on that link, you'll see that a lot of people aren't particularly happy about this bizarre "rule" either!

I made the changes to the fiddle (Removed the span at the top, and the margin still holds) using the overflow:auto technique:

https://jsfiddle.net/ps9na82r/

CSS Fluid layout with containing div margin or padding causes overflow

The simplest method for what you are trying to achieve is just to not specify width: 100% on the margined or padded divs. By default all divs are displayed as block which means they will stretch to fill the remaining horizontal space.

The problem with actually specifying width: 100%, as you have found out, is that the horizonal padding and margin is added on top of the width calculation - if you leave the width as not specified, the browser automatically works out the width required to fill the space, which may not be 100% of it's parent.

In future it's best only to apply width: 100% when you really need it (for example when using floats), and avoid specifying dimensions if you can get away with it.

<h1>hello</h1>
<div style="width:100%;height:100px;border: 1px solid red">
  <div style="width:100%;height:50%; border: 1px solid blue">
    <div style="height:100%;width:150px;float:left; border:1px solid yellow">
      logo
    </div>
    <div style="float:right;border:1px solid green;">
      User| 13-Nov-13| Logout
    </div>
  </div>
  <div id="tb_margin" style="margin-left:40px;border:1px solid green">
    tabbbs with margin here
  </div>
  <div id="tb_padding" style="padding-left:40px;border:1px solid grey">
    tabbbs with padding here
  </div>
</div>

Getting padding and margins inside parent's width

The box model it's like this:

Total width = width + padding + border

If you have got a 1000px of width + 10px of padding it will be a 1020px of total width.

To avoid this you can use this property:

 box-sizing: border-box;

More info:

https://developer.mozilla.org/es/docs/Web/CSS/box-sizing

---

Related Topics