父Div内两个子Div间出现白色间隙，如何消除？

你遇到的间隙问题，核心原因通常是布局方式导致的空白字符解析，或者盒模型计算偏差，以下是针对你的代码的具体解决办法：

一、如果要实现子div水平并排（无间隙） #

推荐方案：Flex布局 #

给父元素.box添加display:flex，这是现代CSS布局的最优解，能自动消除间隙且布局灵活：

.box{
  width: 400px;
  height: 400px;
  border: 5px solid black;
  margin: 20px auto;
  display: flex; /* 新增这行 */
}

.it1,.it2{
    width: 200px;
    height: 200px;
}

.it1{
    background-color: aqua;
}

.it2{
    background-color: brown;
}

兼容旧浏览器方案：Float布局 #

给子元素添加float:left，同时给父元素加overflow:hidden清除浮动影响，还要确保HTML中子元素间无空格/换行（避免解析为空白字符）：

.box{
  width: 400px;
  height: 400px;
  border: 5px solid black;
  margin: 20px auto;
  overflow: hidden; /* 防止父元素高度塌陷 */
}

.it1,.it2{
    width: 200px;
    height: 200px;
    float: left; /* 新增这行 */
}

.it1{
    background-color: aqua;
}

.it2{
    background-color: brown;
}

对应的HTML调整：

<div class="box">
    <div class="it1"></div><div class="it2"></div>
</div>

二、如果要实现子div垂直排列（无间隙） #

垂直方向出现间隙大概率是浏览器默认样式或盒模型问题，可通过重置内外边距解决：

.box{
  width: 400px;
  height: 400px;
  border: 5px solid black;
  margin: 20px auto;
  padding: 0; /* 清除父元素内边距 */
}

.it1,.it2{
    width: 200px;
    height: 200px;
    margin: 0; /* 清除子元素外边距 */
}

额外优化建议 #

全局设置box-sizing:border-box，让元素的width/height包含border和padding，避免布局计算错误：

*{
  box-sizing: border-box;
}

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