Question

如果您查看以下演示HTML，您会看到所有浏览器页面顶部都有一个意外的橙色边框（我已选中）。如果＆lt; p＆gt;标签被替换为＆lt; div＆gt;标签，一切都像预期的那样。

<!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>

这是因为＆lt; p＆gt;有一个上边距，通过边框折叠会折叠到父元素。虽然这是创建文本段落等所需的效果，但它很少用于布局如何确保边界不会升级到某些元素（在这种情况下从＆lt; p;到父div）？

- UPDATE -
因为答案似乎都在“禁用段落上的填充”道路上，所以我重新改写了我的问题并改变了标题。
从p中删除填充是一种消除症状的方法，而不是原因。

Answer 1

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

Answer 2

默认情况下，<p>元素有margin-top，这会将整个内容推下来。您可以使用margin-top: 0上的<p>删除它。

Answer 3

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

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

您应该在几乎所有项目中查看并使用CSS reset。

Answer 4

这是因为<p>是块元素并且始终以新行开头。如果您希望代码使用<p>标记，请添加CSS

p
{
    display:inline;
}

Answer 5

这有点蹩脚，但实际上我自己也找到了它再一次是崩溃的边界欺骗我。 Here是一个描述它的好论坛帖子。在我的设计中，从＆lt; p＆gt;中移除边距是合适的。元件。从我读到的内容来看，下一个最好的事情就是给父母一个很小的余地。

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 个答案: