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

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 class="red">red
  <div class="yellow">yellow</div>
</div>
<div class="green">green</div>

>Solution :

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 class="red">red
  <div class="yellow">yellow</div>
</div>
<div class="green">green</div>

Leave a Reply