部分设备/浏览器中父div与子div间空白无法消除

你遇到的空白线条主要出现在移动端，且已排除半像素问题，以下是针对性的解决方案：

方案1：统一盒模型（优先推荐） #

父元素默认盒模型为content-box，设置的height:80px仅包含内容区域，加上上下各2px的边框后，父元素总高度为84px，子元素height:80px无法完全贴合父元素边框。统一盒模型后，父元素的height会包含边框，子元素设为height:100%即可完全填充：

.parent {
  border: 2px solid #000;
  height: 80px;
  box-sizing: border-box;
}

.child {
  height: 100%;
  background-color: #000;
}

方案2：消除字体相关隐形间隙 #

部分移动端浏览器会继承默认字体属性，导致父元素产生微小行高间隙，给父元素添加以下属性即可消除：

.parent {
  border: 2px solid #000;
  height: 80px;
  font-size: 0;
  line-height: 0;
}

.child {
  height: 80px;
  background-color: #000;
}

方案3：强制裁剪渲染间隙 #

浏览器渲染精度问题可能导致细微线条，给父元素添加overflow:hidden可强制裁剪多余区域：

.parent {
  border: 2px solid #000;
  height: 80px;
  overflow: hidden;
}

.child {
  height: 80px;
  background-color: #000;
}

方案4：重置默认边距 #

浏览器默认样式可能存在隐性边距，添加重置规则确保元素无额外间距：

.parent, .child {
  margin: 0;
  padding: 0;
}

.parent {
  border: 2px solid #000;
  height: 80px;
}

.child {
  height: 80px;
  background-color: #000;
}

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