删除边框样式更改页面布局 [英] Removing border style changes page layout
问题描述
我对以下HTML / CSS代码有问题：
I have a problem with a following HTML/CSS code:
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（灰色）。
但是，从 #container 的样式定义中删除行： border：solid 1px black; ，外部div（灰色）从与内部div（黄色）相同的顶部位置开始。
这发生在Firefox 3.x和Chrome。
有人可以解释为什么会发生？
The sample page looks as I expect, i.e. the lower div (yellow) is pushed 400px down from the top border of the outer div (gray).
But, when you remove line: border: solid 1px black; from the style definition of #container, the outer div (gray) starts from the same top position as the inner div (yellow).
This happens in Firefox 3.x and Chrome.
Can someone explain why does it happen ? In my opinion, removing border style should not affect this layout at all.
推荐答案
边框单独的折叠边距： http://www.w3.org/TR/CSS21/box.html#collapsing-margins
Borders separate collapsing margins: http://www.w3.org/TR/CSS21/box.html#collapsing-margins
这篇关于删除边框样式更改页面布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
