去除子元素和父元素div之间的单像素间隙

Question

去除子元素和父元素div之间的单像素间隙

3

这里有一段简单的代码块：

<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 两侧出现了约 1 像素的白边。

如何消除这些白边并确保子 div 完全适合父 div？

- FunnelScr

我无法复制你提供的代码中出现的问题，这可能只是你的浏览器呈现的方式不同。你使用的是哪个浏览器？ - Dexterians

@Dexterians，这个问题在Chrome和Firefox中都存在。这取决于您是否添加了文档类型声明。我已经通过使用box-sizing来解决它。 - learningtoanimate

@Dexterians 我正在使用Chrome浏览器。 - FunnelScr

@learningtoanimate，是的，我看到了你的答案并点赞了。我没有想到“border-box”属性！ - Dexterians

哈哈，谢谢。这是一个常见的问题，我希望它能像怪癖模式一样默认处理，以避免出现这种头痛的情况。 - learningtoanimate

4个回答

1

这是因为您正在使用Chrome浏览器。我用非常简单的代码也有相同的行为：

        <div class="container">
            <div class="item-a">item A</div>
        </div>

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

.container {
    width: 500px;
    height: 500px;
    border: 5px solid black;
    background-color: cornflowerblue;
}

.item-a {
    width: 300px;
    height: 140px;
    background-color: orange;
    border: 3px solid crimson;
}

在100%缩放时，它有一个间隙。当我缩放时，间隙会消失，但是当我再次缩放时，容器和项目-a之间的间隙可能会重新出现（您可以注意到父级和子级边框之间1像素的矢车菊背景）。这就是目前Google Chrome在Linux和Windows 11中处理事情的方式。然后我尝试使用Firefox查看相同的代码，无论缩放如何，都没有间隙。

- daGo

这个问题有解决方法吗？ - learningtoanimate

@learningtoanimate 我成功地移除了外框的边框。我通过使用一个带有 padding: 2px 的包装器 div 来模拟边框，这不会创建间隙。 - spectras

0

与许多建议设置box-sizing: border-box相反，我使用了content-box并解决了我的问题：box-sizing: content-box

- goamn

但是解决方案有限...如果我使用浏览器缩放功能放大，那么问题会再次出现。 - goamn

-1

尝试将子元素设置为相同的宽度：75vw;

.parent {
    position: relative;
    width: 75vw;
    height: 300px;
    border: 5px solid #000;
}
.child {
    width: 75vw;
    height: 100px;
    background-color: #999;
}

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

- Kennedy Carvalho

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- learningtoanimate · Accepted Answer

问题在于您使用的边框以及浏览器处理方式。将 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来居中对齐内容。Margin是最简单的方法，这就是为什么我在这里添加了它。

有时，浏览器在怪异模式下会以不同的方式处理事物，因此请确保你有一个doctype声明。