CSS doubt related to the background color, ID and Classes

HTML-CSS
1

Tell us what’s happening:
Why when I set the value to margin minus something of the injected text green box and then the yellow box div soak up the the injected text green box and the background turns yellow
The same thing happen if I use a ID for set the background color and me sure that the background will be the same (because it¡s more important) but idk why the same thing is happen even with the ID

image
image873×419 9.62 KB

image
image940×409 7.57 KB

Your code so far


<style>
.injected-text {
  margin-bottom: 0px;
  text-align: center;
  background-color: green;
}

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

.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 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36.

Challenge: Adjust the Margin of an Element

Link to the challenge:

2

Yeah, that’s a little odd. I understand it as when you have the negative margin, it puts it behind the green background gets covered by the yellow background. The foreground (the text) shows through because that top layer has no foreground. It’s a bit odd, but it kinda makes sense.

3

hey @ivansalinasramirez20 ,

atleast after getting answer mark the topic as solution done which turns the topic with green color tick mark.

if u like my suggesstion, make sure u will do it.

4

I’m not completly sure that I get what you said, but I didn’t mark the previous answer as a solution because I want to see if someone else could give me anothers answers because I’m still having the same doubt , may be someone else could explain me better , that’s why I didn’t mark it as a solution
Thanks for your suggestion @rajat310 ! :pray:

5

Margins are a way to define how much distance you want between two elements (in this case, the .injected-text and the .yellow-box below it). With a positive margin, you increase the distance, and with a negative margin, you decrease it. Meaning that the following element (the .yellow-box) will be dragged upwards.

6

Thanks! but why the green background desapear even if I set a green background color with an ID?

7

It has to do with the painting order (as far as I know).

8

@ivansalinasramirez20 ,
okay i get that .