Learn the CSS Box Model by Building a Rothko Painting - Step 21

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I do not understand the margin part, I think when we add top-margin:20px to the div class=“one”, this div one should be below the div class=“canvas” by 20px, but instead of that, the top margin of the div one is outside the div canvas. Can you explain to me why? Thank you.

image
image1920×1080 295 KB 

  **Your code so far**

/* file: styles.css */
.canvas {
width: 500px;
height: 600px;
background-color: #4d0f00;

}

.frame {
border: 50px solid red;
width: 500px;
padding: 50px;
margin: 20px auto;
background-color:blue;
}

.one {
width: 425px;
height: 200px;
background-color: #efb762;
margin: 20px auto;
}

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Rothko Painting</title>
  <link href="./styles.css" rel="stylesheet">
</head>
<body>
  <div class="frame">
    <div class="canvas">
      <div class="one"></div>
    </div>
  </div>
</body>
</html>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Learn the CSS Box Model by Building a Rothko Painting - Step 21

Link to the challenge:

2

look at HTML tho.
.one is inside .canvas, right?

3

Someone please explain this.

4

Please create your own topic when you have specific questions about your own challenge code. Only respond to another thread when you want to provide help to the original poster of the other thread or have follow up questions concerning other replies given to the original poster.

The easiest way to create a topic for help with your own solution is to click the Ask for Help button located on each challenge. This will automatically import your code in a readable format and pull in the challenge url while still allowing you to ask any question about the challenge or your code.

Thank you.

5

Thats right, but the question is:

WHY the top-margin of div class=“one” is outside the div class=“canvas”?

6

Finally found the explanation. :slight_smile:

Top-margin of .one element COLLAPSE with top-margin of .canvas element, which is called Collapsing margin.

Relevant explanation 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.

:star: Adjoining vertical margins collapse :star:

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 (Note that certain zero-height line boxes (see 9.4.2) are ignored for this purpose.)
  • 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

The left and right margins behave as you expect because:

:star: Horizontal margins never collapse. :star:

3 Likes
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.