CSS：为什么删除边框会极大地影响div容器的位置？_Css_Position_Border

CSS：为什么删除边框会极大地影响div容器的位置？

css

CSS：为什么删除边框会极大地影响div容器的位置？,css,position,border,Css,Position,Border,我有以下简单的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<

我有以下简单的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>


测试
#页面{
位置：相对位置；
宽度：1000px；
最小高度：300px；
保证金：0自动；
边框：1px纯红；
背景颜色：绿色；
}
#全部内容{
位置：静态；
顶部：225px；
保证金：225px自动0px自动；
宽度：850px；
背景颜色：蓝色；
}
#内容{
边框：1px纯白；
}
这就是内容

它看起来和我想要的一模一样，但是如果我从#页面中删除边框，它会完全破坏布局。我不明白为什么。我知道，我可以用一个透明的边框作为解决办法，但这似乎很奇怪…

因为你的

中有

边距：225px auto 0px auto

，可以将整个内容向下推

不要使用

margin

，而是使用

position:absolute/relative

在

中定位元素，因为

中有

margin:225px auto 0px auto

，可以向下推动整个内容

不要使用

margin

，而是使用

position:absolute/relative

在

中定位元素所有内容的边距都在向下推。所有内容的边距将其向下推。

用小提琴来演示你的问题会非常有帮助。用小提琴来演示你的问题会非常有帮助。谢谢。我玩了好几个小时都没弄明白。令人惊讶的是，这个解决方案是多么简单。我不知道利润率下降（正如Stefan发布的链接中所指出的），所以我怀疑这与此有关。谢谢。我玩了好几个小时都没弄明白。令人惊讶的是，这个解决方案是多么简单。我不知道利润率下降（正如Stefan发布的链接中所指出的），所以我怀疑这与此有关。