Do not understand how this is nested!

[krishnakavin007]

I’m doing the -responsive web designing, and in the adjust margin of element course.
The code is given below.

<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: 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>

The final output has the browser having the “injected-class” element be nested with the other two elements.
While this is so, the “box red-box” and “box blue-box” elements are separate.
I cannot find out why the box elements are nested in the inject element, while the box elements are nested within each other.

Is there some line here that specifies the inject element to be nested with the box elements, or the box elements having nested within the inject element. ?
I’m not able to identify it!!

[Exotic]

I didnt quite get what you are trying to say.

If you are talking about why you are seeing the text margin of the .injected-text class then it seems to be nested because of this line

@krishnakavin007

margin-bottom: -25px;

If you change it to 0 or just remove it , you will find that it is no longer nested.

[krishnakavin007]

oh that was it! thanks dude. And yes, I did mean why the margin was nested into the yellow box class.