Css, Nested Divs & Margins VS. Padding

CSS, nested divs & margins vs. padding

Personally, I prefer option A. Why? Say now I have to add other HTML elements into the div and I want the padding to be maintained, I would not have to add other rules to my CSS files to get it working.

Nested DIV in a responsive design - margin, padding, etc

Use box-sizing css property for #block element.

#block {
    width: 100%;
    background-color: #CCC;
    padding: 20px;

    -o-box-sizing: border-box; /* Opera */
    -ms-box-sizing: border-box; /* IE */
    -moz-box-sizing: border-box; /* Mozilla */
    -webkit-box-sizing: border-box; /* Chrome, Safari */
    box-sizing: border-box;
}

About CSS box-sizing property: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Nested divs and margins not working as expected

Make sure the parent (header) has : overflow: hidden;

Elements with overflow set to anything other than visible (They do not collapse margins with their children.)

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

hierarchy of nested divs has unintended overlapping borders when using margin and padding

Change .thingy to display:inline-block.

Section 8.3 on this spec page http://www.w3.org/TR/CSS2/box.html says
These properties have no effect on non-replaced inline elements. for margin-top and margin-bottom.

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

I know the difference between padding and margin but when should you use each one?

I think Itay Moav answers from this question provides a good check list on what conditions you would like to use margin, and on what conditions you would like to use padding. Let me copy-paste it here:

1. You have some kind of background properties. Margins won't get them.
2. You have a border
3. You use TD (no margins)
4. Two nested items, The margins are collapsed together, where paddings not. (need to check this one)
5. They probably affect the width and height of the element differently. (If some one knows better, pls edit this).

How do I set margin/padding of a nested flex display?

Just add margin-bottom to your yellow element,

.grid {
  display: flex;
  padding: 10px;
}

#box1 {
  background: red;
  border-style: solid;
  border-width: 1px;
  flex: 1;
  height: 20vw;
  margin: 10px;
}

.column {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 10px;
  /*grid margin*/
}

#box2 {
  background: yellow;
  border-style: solid;
  border-width: 1px;
  width: 100%;
  flex: 1;
  margin-bottom: 20px; /* 2 x margin */
}

#box3 {
  background: green;
  border-style: solid;
  border-width: 1px;
  width: 100%;
  flex: 1;
}

<div class="grid">
  <div id="box1">
  </div>

  <div class="column">
    <div id="box2">
    </div>

    <div id="box3">
    </div>
  </div>
</div>

When I add a margin to a nested DIV, it causes the parent DIV to receive the margin instead, unless I give the parent DIV a border. Why?

I usually solve this problem by setting display: inline-block on outer div. It'll make outer div to occupy exactly the space necessary to display its content.

An example, showing the difference.

margin-top in a nested div

Margins will collapse by design. Add 1px of padding as well and it should work fine.

---

Related Topics