Question

我有以下简单的html页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<style type="text/css">
#page {
    position: relative;
    width: 1000px;
    min-height: 300px;
    margin: 0 auto;
    border: 1px solid red;
    background-color: green;
}
#allcontent {
    position: static;
    top: 225px;
    margin: 225px auto 0px auto;
    width: 850px;
    background-color: blue;
}
#content {
    border: 1px solid white;
}
</style>
</head>
<body>
<div id="page">
    <div id="allcontent">
        <div id="content">
            <p>This is content</p>
        </div>
    </div>
</div>
</body>
</html>

它看起来完全像我希望它看起来像，但如果我从#page删除边框，它完全搞砸了布局。我无法弄清楚为什么。我知道，我可以使用透明边框作为解决方法，但这看起来很奇怪......

Answer 1

因为margin:225px auto 0px auto中<div id="allcontent">推送了整个内容。

不使用margin，而是使用position:absolute/relative将元素放在<div id="page">中。

Answer 2

#allcontent的余量正在推低它。 http://jsfiddle.net/2QjYG/

CSS：为什么删除边框会严重影响div容器的位置？

2 个答案: