为什么子div是向下移动一些像素和一些像素从父div左?

Question

子div从父div向下移动一些像素，向左移动一些像素。我关心的是班上的"黄色"这是"红色"类的孩子。下面是我的代码:

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>

Answer 1

font - family:宋体;这就是为什么这里的子div边框宽度为2px占用了空间。

将边框替换为如下的轮廓线

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>