Margin Does Not Push Down Another Margin

Margin does not push down another margin

The behavior you're seeing is known as margin collapse, and it is an expected behavior. Basically, when the margins of two block level elements touch, they collapse, and only the largest one will appear.

Margins collapse between adjacent
elements. In simple terms, this means
that for adjacent vertical block-level
elements in the normal document flow,
only the margin of the element with
the largest margin value will be
honored, while the margin of the
element with the smaller margin value
will be collapsed to zero.

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

There is no one fix for this - you can try using padding instead, or simply increase the margins by taking this into account.

Margin-Top push outer div down

put overflow:auto in the parent div
see more in this link

Why does adding a margin to my div push its content (columns) off the page?

CSS margins are added to the outside of the element. If you have a <div> with a width of 100% and you add 5% margin on both sides, that element is now 110% wide.

If you want to add margins you have to account for them in the element's width. If both the width and margins are percentages, you can just subtract the margin:

main {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

If width and margin are using different units (e.g. width: 100%, margin: 24px), you can use css calc:

main {
  width: calc(100% - 48px);
  margin-left: 24px;
  margin-right: 24px;
}

In the snippet below, the only difference between the first row and the second is the margin. Notice that the boxes themselves are the same size. The margin is added outside the box.

* {  box-sizing: border-box;  padding: 0;  margin: 0;}
.grid {  background-color: white;  background-image: linear-gradient(transparent 24px, #999 25px), linear-gradient(90deg, transparent 24px, #999 25px);  background-size: 25px 25px, 25px 25px;  background-position: 1px 1px;  height: 100vh;}
.container > div {  display: inline-block;  width: 100px;  background: bisque;  margin: 0 21px 22px 0;  min-height: 50px;}
.container.second > div {  background: tomato;  margin: 0 46px 15px 0;}

<div class="grid">  <div class="container first">    <div></div>    <div></div>    <div></div>    <div></div>  </div>
  <div class="container second">    <div></div>    <div></div>    <div></div>    <div></div>  </div></div>

Adding margin to div pushes it off the screen

Use CSS Flex

/*QuickReset*/ * { box-sizing: border-box; margin: 0; }

html {
  height: 100%;
}

body {
  background: black;
  height: 100%;
  position: relative;
  
  display: flex; /* Use flex! */
  padding: 5px; /* Instead of children margin */
  /* gap: 5px; /* Uncomment to add a gap between your child elements! */
}

.one,
.two {
  border: 3px solid green;
  border-radius: 5px;
}

.one { width: 10%; background: red;  }
.two { width: 90%; background: blue; }

<div class="one">
</div>
<div class="two">
</div>

Why isn't my margin working with position: fixed?

i think you have to explictly declare the position of fixed div.

div.header {
position: fixed;
width: 100%;
background: #ffffff;
top:20px;
-webkit-box-shadow: 0 8px 6px -6px #333;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
}

and assign margin at the content div

div.contentwrap {
width: 80%;
height: 1600px;
background: #ccc;
margin: 80px auto;
}

check this fiddle if works like you need:
https://jsfiddle.net/0cmvg92m/3/

Why does this CSS margin-top style not work?

You're actually seeing the top margin of the #inner element collapse into the top edge of the #outer element, leaving only the #outer margin intact (albeit not shown in your images). The top edges of both boxes are flush against each other because their margins are equal.

Here are the relevant points from the W3C spec:

8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Adjoining vertical margins collapse [...]

Two margins are adjoining if and only if:

• both belong to in-flow block-level boxes that participate in the same block formatting context
• no line boxes, no clearance, no padding and no border separate them
• both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
  
  
  • top margin of a box and top margin of its first in-flow child

You can do any of the following to prevent the margin from collapsing:

• Float either of your div elements
• Make either of your div elements inline blocks
• Set overflow of #outer to auto (or any value other than visible)

The reason the above options prevent the margin from collapsing is because:

• Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
• Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
• Margins of inline-block boxes do not collapse (not even with their in-flow children).

The left and right margins behave as you expect because:

Horizontal margins never collapse.

---

Related Topics