这是一个简单的代码块:
<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？
最佳答案
问题在于您使用的边框以及浏览器处理它的方式。设置 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 不再支持它，因此您应该使用 margin 或 flex 居中。边距是最简单的，所以我在此处添加了它。
有时浏览器在怪癖模式下也会有不同的处理方式，所以确保你有一个 doctype声明。
关于html - 删除子和父 div 之间的单个像素间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63185852/