在此测试案例中禁用边界折叠

Question

如果检查以下演示HTML，您将在所有浏览器的页面顶部看到一个意外的橙色边框（我检查过）。 如果将标记替换为<div>标记，则一切将按预期工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test Lay-Out</title>         
        <style>
            html{
                overflow: auto; /*for IE*/
                height: 100%;
            }

            body{
                background-color: orange;
                margin: 0;
                height: 100%;
            }
            #page{
                background-color: green;

                height: 100%;
                margin-bottom: -50px;
            }
            #footer{
                background-color: red;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div id="page">
            <p>test</p>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

这是因为具有最高边距，并且通过边框折叠将折叠到父元素。 虽然这是创建文本段落等的理想效果，但很少用于布局。
如何确定边界没有提升到某些元素（在本例中是从＆ltp;到父div）？

-更新-
因为答案似乎都落在了“禁用该段落的填充”之路上，所以我对问题做了一些修改，并更改了标题。
从p删除填充是删除症状的一种方法，而不是原因。

Answer 1

body / html的填充也需要重置。

Answer 2

元素默认情况下有一个margin-top ，它将整个内容压低。 您可以使用上的margin-top: 0摆脱它。

Answer 3

所有浏览器均会在定义任何样式之前加载默认样式表。

这是将“普通” HTML加载到浏览器中时看到的样式。

您应该研究几乎所有项目并在其中使用CSS重置。

Answer 4

这是因为是块元素，并且总是从新行开始。 如果您希望代码与标记一起使用，则将其添加到CSS

p
{
    display:inline;
}

Answer 5

这有点la脚，但我实际上是自己发现的。
再一次是崩溃的边界欺骗了我。 这是一个很好的论坛帖子，对此进行了描述。 在我的设计中，删除元素的边距是适当的。 从我的读物来看，下一件最好的事情就是给父母一点钱。

Answer 6

将此添加到您的样式：

#page p{ margin-top: 0; }

Answer 7

是的，在顶部会留有空隙，因为段落之前和之后都留有一些空间。 下面删除空格尝试一下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>Test Lay-Out</title>                     
                <style>
                        html{
                                overflow: auto; /*for IE*/
                                height: 100%;
                        }

                        body{
                                background-color: orange;
                                margin: 0;
                                height: 100%;
                        }
                        #page{
                                background-color: green;
                                height: 100%;
                                margin-bottom: -50px;
                        }
                        #page p.first{
                                margin-top:0;
                        }
                        #footer{
                                background-color: red;
                                height: 50px;
                        }
                </style>
        </head>
        <body>
                <div id="page">
                 <p class="first">test</p>
                </div>
                <div id="footer">footer</div>
        </body>
</html>

Answer 8

如何添加overflow: hidden; 到父元素？

在此测试案例中禁用边界折叠

问题描述

8 个解决方案

解决方案1
5 2009-05-13 21:25:33

解决方案2
2 2009-05-13 07:55:44

解决方案3
2 2009-05-13 07:59:16

解决方案4
0 2009-05-13 07:56:57

解决方案5
0 2009-05-13 07:58:41

解决方案6
0 2009-05-13 07:59:46

解决方案7
0 2009-05-13 08:12:53

解决方案8
0 2009-05-13 08:15:39

在此测试案例中禁用边界折叠

问题描述

8 个解决方案

解决方案1 5 2009-05-13 21:25:33

解决方案2 2 2009-05-13 07:55:44

解决方案3 2 2009-05-13 07:59:16

解决方案4 0 2009-05-13 07:56:57

解决方案5 0 2009-05-13 07:58:41

解决方案6 0 2009-05-13 07:59:46

解决方案7 0 2009-05-13 08:12:53

解决方案8 0 2009-05-13 08:15:39

解决方案1
5 2009-05-13 21:25:33

解决方案2
2 2009-05-13 07:55:44

解决方案3
2 2009-05-13 07:59:16

解决方案4
0 2009-05-13 07:56:57

解决方案5
0 2009-05-13 07:58:41

解决方案6
0 2009-05-13 07:59:46

解决方案7
0 2009-05-13 08:12:53

解决方案8
0 2009-05-13 08:15:39