Add a Negative Margin to an Element - bigger blue box?

HTML-CSS
1

Tell us what’s happening:
Although I set the red and blue boxes to the same settings, the blue box appears to be taller than my red box. Or it is just an optical illusion?

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: -15px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 20px;
    margin: -15px;
  }
</style>

<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/76.0.3809.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/add-a-negative-margin-to-an-element

2

The blue box is over-lapping the the red box. If you want to be able to see what is going on, give the blue box a specified width such as 75% and it will help you understand what is happening and why it appears this way…

3

Ah. That is useful to know. But why? The two settings are the same?

4

Correct. And they are doing the same thing. But the red box is at the top of the element. I suggest when you get to any point you start to ponder why something is working, play around with it a little bit as it tends to help make sense. Try creating a few more elements maybe an orange box and a green box. Try margin at -25, try it at 0, try it at 10.

Think of the elements like 2 pieces of paper sitting next to each other side by side, lined up perfectly. when they are touching but not overlapping, that is margin 0. If I told you to keep the left piece in place, but move the right piece 1 inch to the left, what would happen? How would those papers look?

In this case, the blue element is called after the top element so is going to be loaded over the other element.

5

Many thanks. It makes sense the way you explained it.

6

Awesome! please mark as solution so others can see this is solved.:grinning:

7

I would suggest separating the margins out into their long-form and drop the left/right margin just for simplicity.

.red-box {
  background-color: crimson;
  color: #fff;
  padding: 20px;
  
  /* this will pull both .red-box and .blue-box up an equal amount */
  margin-top: -15px;
  
  /* this will pull .blue-box up */
  margin-bottom: -15px;
}

.blue-box {
  background-color: blue;
  color: #fff;
  padding: 20px;
  
  /* this will pull .blue-box up */
  margin-top: -15px;
  
  /* this will pull the bottom of .yellow-box up */
  margin-bottom: -15px;
}

So what you end up with is the .blue-box being pulled up 15px by the .red-box and another 15px by itself.

Keep in mind that the boxes are <h5> elements and have some default margin. You can remove all margin at the top of the style using the universal selector so you only have the margins you give them.

* {
  margin: 0;
}

This will change the result, now only one of the two top/bottom margins will have an effect. Either the .red-box bottom or the .blue-box top will pull the .blue-box. This is caused by margin collapse. As long as both negative margins are the same amount only one of them will have an effect. If you increase the margin on either one it will win.

To see how the margins are working use the dev tools, you can check and uncheck the margins and see the results in real-time.



That got a bit long, sorry.