移除边框样式会改变页面布局答案

【问题标题】：Removing border style changes page layout移除边框样式会改变页面布局
【发布时间】：2009-07-23 13:03:05
【问题描述】：

我对以下 HTML/CSS 代码有疑问：

CSS

* { padding: 0; margin: 0; border: none; outline: none; }
#container {
    margin: 10px auto 10px auto;
    width: 960px;
    background-color: #dddddd;
    border: solid 1px black;
}
#container2 {
    margin-left: 200px;
    margin-top: 400px;
    background-color: yellow;
}

HTML

<body>
    <div id="container">
        <div id="container2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
</body>

示例页面看起来与我预期的一样，即下部 div（黄色）从外部 div（灰色）的顶部边框向下推 400px。但是，当您从#container 的样式定义中删除行：border: solid 1px black; 时，外部 div（灰色）从与内部 div（黄色）相同的顶部位置开始。这发生在 Firefox 3.x 和 Chrome 中。有人可以解释为什么会这样吗？在我看来，移除边框样式根本不应该影响这个布局。

【问题讨论】：

由于某种原因，您的 XHTML（天哪）1.0 Strict 在顶部有一个 HTML 4.01 过渡文档类型。你应该改正一下。
谢谢，已更正。当我从现实生活中的文档创建示例代码时，这是大量复制/粘贴的副作用
仍然无效。您不能随意在 HTML 中的标签内添加“/”字符 :)
希望现在一切正常 :-)。再次感谢戴夫。

标签： html css

【解决方案1】：

边框分隔折叠边距：http://www.w3.org/TR/CSS21/box.html#collapsing-margins

【讨论】：

感谢您提供线索。我在<div id="container"> 之后添加了<br clear="both"，现在它可以正常工作了。

【解决方案2】：

真的很奇怪。如果你想去掉边框，在#container中添加padding: 1px，就可以去掉边框而不影响布局。

【讨论】：

我很感兴趣。这是“正确”的修复吗？为什么会这样？
此修复有效。但是，这与其说是解决方案，不如说是一种解决方法。正确的解决方案是将<br clear="both"> 添加到#container div。根据 CSS，当有间隙时，垂直边距不会塌陷。还是谢谢。
如何将非语义（即 BR）元素添加到您的标记中是正确的解决方案？一定有别的东西……

【解决方案3】：

边框的宽度占用空间，这会导致布局发生变化。为了解决这个问题，您可能需要根据边框的宽度更改边距/填充。

【讨论】：

我也以为是这个问题，但看了下情况并非如此，这两个页面看起来完全不同。

【解决方案4】：

如果你添加

浮动：左；

在您的#container div 上，灰色框的高度将与您从样式中移除“边框”之前的高度相同。

那么你只需要把盒子放在正确的位置。

希望对您有所帮助...

【讨论】：

【解决方案5】：

如前所述，您面临着边距折叠的问题。边距在块格式化上下文中折叠。有一种方法可以通过将overflow: hidden; 添加到#container 来创建另一个上下文

【讨论】：

【解决方案6】：

原因已在上面的帖子中说明，但我认为正确的解决方法如下：

.TextInput
{
    padding: 4px 4px 4px 4px;
    border: 1px solid rgb(50,50,50);
}

.TextInput:focus
{
    padding: 3px 3px 3px 3px;
    border: 2px solid rgb(0, 150, 133);
}

当文本框有输入时，上面的例子设置了一个更粗的边框。请注意，要将边框从 1 像素更改为 2 像素，必须将填充从 4 像素减少到 3 像素。如果不将填充更改为 3 像素而不是 4 像素，文本框将在布局中发生位置偏移，导致其垂直位置发生 1 像素的小偏移。

【讨论】：