Why child div is shifted some pixels down and some pixels left from the parent div?-CodePudding

Child div is shifted some pixels down and some pixels left from the parent. I am concerned about the class "yellow" that is child of class "red". Here is my code:

div{
    width:100px;
    height:100px;
    border:solid 2px;
}

.red{
    background-color:red;

}
.yellow{
    background-color:yellow;
}
.green{
  background-color:green;
}

<div >red
  <div >yellow</div>
</div>
<div >green</div>

CodePudding user response：

border:solid 2px; is the reason, here child div border width 2px is occupying space.

Replace border with an outline like below

div{
    width:100px;
    height:100px;
    outline:solid 2px;
}

.red{
    background-color:red;

}
.yellow{
    background-color:yellow;
}
.green{
  background-color:green;
}

<div >red
  <div >yellow</div>
</div>
<div >green</div>