Question

我遇到以下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。但是，当您从border: solid 1px black;的样式定义中删除行：#container时，外部div（灰色）从与内部div（黄色）相同的顶部位置开始。这种情况发生在Firefox 3.x和Chrome中。有人能解释为什么会这样吗？在我看来，删除边框样式不应该影响这种布局。

Answer 1

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

Answer 2

真的很奇怪。如果您想取消边框，请将padding: 1px添加到#container，然后删除边框而不影响布局。

Answer 3

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

Answer 4

如果你添加

float：left;

在#container div上，然后灰色框的高度与从你的风格中删除“边框”之前的高度相同。

然后你只需要将盒子放在正确的位置。

希望这有助于...

Answer 5

如前所述，您面临崩溃边缘。边距格式化内容中的边距被折叠。有一种方法可以通过将overflow: hidden;添加到#container

来创建另一个上下文

Answer 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个像素。

删除边框样式会更改页面布局

6 个答案: