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

本文介绍了删除边框样式更改页面布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我对以下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.

margins

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

问题描述

推荐答案