Clarification on a "Marginal" Situation

HTML-CSS
1

Tell us what’s happening:

I’ve been playing around with this a little, but I can’t seem to crack what’s happening with the margin between the red box and the blue box. Right now, I’m setting the margin for red box to 30px and the one for the blue box to 10px. But the margin between the blue box and the red box seems to be somewhere between 10px and 30px. Why is this?

(I have researched a little on the topic of margin collapsing, but it doesn’t quite make sense for this situation? Cause wouldn’t the margin in question be 10px instead? )

Your code so far


<style>
.injected-text {
  margin-bottom: -25px;
  text-align: center;
}

.box {
  border-style: solid;
  border-color: black;
  border-width: 5px;
  text-align: center;
}

.yellow-box {
  background-color: yellow;
  padding: 10px;
}

.red-box {
  background-color: crimson;
  color: #fff;
  padding: 20px;
  margin: 30px;
}

.blue-box {
  background-color: blue;
  color: #fff;
  padding: 20px;
  margin: 10px;
}
</style>
<!--<h5 class="injected-text">margin</h5>
-->
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36.

Challenge: Adjust the Margin of an Element

Link to the challenge:

2

As per MDN:

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is THE LARGEST of the individual margins.

So in your example you’re getting 30px.

I recommend you use DevTools - it’s dead useful to check out margins, paddings and more :wink:

dev-tools
dev-tools873×509 30.7 KB

1 Like
3

Thanks for the tip.

Also, I just realized, is it correct that for the red and blue boxes in the example, they the are surrounded not only by their own margin but also the padding set by the parent element (the yellow box) ?

4

Hello, the yellow box allows a play area for the elements it contains its height x its width minus the padding if I may say. In this playground the red and blue boxes can define margins which will reduce their size. for the common margins the largest crushes the smallest.

5

Hi @nicolas,
Thanks for helping out. Well, after measuring the dimensions off my screen for a while, I’m pretty aware of the “larger margin over smaller margin” phenomenon. But I’m still a little confused why the yellow area below the blue box is still less then then the area between the blue and red box. As for now, I’m suspecting that the area below the blue area consisted of not only the blue box’s margin but also the adding by the yellow box.

6

The space between the red and blue box is 30px (red box margin) and the space under the blue box is 20px (10px margin of the blue box plus 10px of yellow container padding). Nothing wrong here

7

Thanks! This is the explanation I was looking for. :wink:

1 Like