HTML and CSS --- margin Problems

Question

If you place a margin-top on the first box (red_box) it pulls or affects the containing box (container). Why?

.red_box {
  background-color: red;
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 20px;`
  margin-left: 40px;
  height: 100px;
  width: 300px
}

.green_box {
  background-color: green;
  margin-top: 40px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 40px;
  height: 100px;
  width: 300px
}

.container {
  width: 500px;
  height: 500px;
  background-color: yellow;
}

<div class="container">
  <div class="red_box">
    red box
  </div>
  <div class="green_box">
    green box
  </div>
</div>

andreas · Accepted Answer · 2017-02-25 14:48:11Z

2

The reason for this behaviour is margin collapsing:

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin.

You can prevent it with an overflow rule on the .container:

.red_box {
  background-color: red;
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 20px;`
  margin-left: 40px;
  height: 100px;
  width: 300px;
}

.green_box {
  background-color: green;
  margin-top: 40px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 40px;
  height: 100px;
  width: 300px
}

.container {
  width: 500px;
  height: 500px;
  background-color: yellow;
  overflow: hidden; /* <-- this prevents margin collapsing */
}

<div class="container">
  <div class="red_box">
    red box
  </div>
  <div class="green_box">
    green box
  </div>
</div>

edited Feb 25, 2017 at 14:48

answered Feb 25, 2017 at 14:41

andreas

17k13 gold badges81 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML and CSS --- margin Problems

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related