CSS布局中子div为何相对父div向下、向左偏移若干像素？

偏移原因 #

.yellow元素相对.red父元素的偏移，由两个核心问题导致：

• 向下偏移：父元素.red开头直接写入的文本red属于行内内容，会在父容器顶部生成匿名行盒占据高度，块级属性的.yellow默认在正常文档流中排在该行盒下方，因此出现向下错位。
• 视觉上的水平错位：所有div默认使用content-box盒模型，设置的width:100px仅定义内容区宽度，加上左右各2px的边框后，元素实际总宽度为104px；父元素.red的内容可用宽度仅100px，子元素宽度溢出父容器，就会出现偏移的视觉效果。同时HTML标签间的换行、缩进会被解析为空白文本节点，也会加剧布局错位。

修复方案 #

1. 清理父容器内的游离文本：如果不需要在.red上显示"red"文字，直接删除这段游离在子元素外的文本；如果需要保留文字，将文字包裹在单独的标签内，通过定位、浮动等方式避免挤占正常流子元素的位置。
2. 全局统一盒模型，清除默认边距：在CSS开头加入全局重置规则，让width属性直接包含边框、内边距的计算，同时清除浏览器默认给元素加的内外边距，从根源上避免宽度溢出、默认边距导致的偏移：

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   

3. （可选）如果父容器内存在不可避免的空白文本节点，可以给父元素临时设置font-size: 0让空白字符不占位置，再给需要显示文字的子元素单独设置正常字号即可。

修复后完整代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
div{
    width:100px;
    height:100px;
    border:solid 2px;
}

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

<div class="red">
  <div class="yellow">yellow</div>
</div>
<div class="green">green</div>

调整后.yellow会完全贴合.red父元素的内容区边缘，不会再出现异常偏移。

内容的提问来源于stack exchange，提问作者arin