时间戳

首页 > 解决方案 > 删除子div和父div之间的单个像素间隙

html - 删除子div和父div之间的单个像素间隙

问题描述

这是一个简单的代码块：

<style type="text/css">
.parent {
    position: relative;
    width: 75vw;
    height: 300px;
    border: 5px solid #000;
}
.child {
    width: 100%;
    height: 100px;
    background-color: #999;
}
</style>

<center>
    <div class="parent">
        <div class="child"></div>
    </div>
</center>

但是，当在不同的屏幕宽度下查看时，结果会有所不同。

在这里，子 div 在一定的屏幕宽度上完全适合父 div。

在此处输入图像描述

但是在这里，当屏幕宽度不同时，子div的两边会出现一个大约1px的空白。

在此处输入图像描述

如何摆脱这个空白并确保子 div 完全适合父 div？

标签： htmlcss

解决方案

问题在于您使用的边框以及浏览器处理此问题的方式。设置box-sizing为border-box解决此问题。这是一个常见的，但一旦你知道它，你将能够更好地发现它。

.parent {
  position: relative;
  width: 75vw;
  height: 300px;
  border: 5px solid #000;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.child {
  width: 100%;
  height: 100px;
  background-color: #999;
  margin: 0;
}
<!DOCTYPE html>
<div class="parent">
  <div class="child"></div>
</div>

此外，这些天您不需要text/css在标签中定义，浏览器知道代码是什么。也尽量不要内联使用它，除非它只是为了这个问题。同样，该<center>标签已被贬值，这意味着 HTML 5 不再支持它，因此您应该使用边距或 flex 居中。保证金是最简单的，这就是我在这里添加的原因。

有时浏览器在 quirks 模式下也会有不同的处理方式，所以请确保你有一个doctype声明。

推荐阅读