Fatal编程技术网
  • html/
  • Html 页眉中的边距0，导航

Html 页眉中的边距0，导航

html css

Html 页眉中的边距0，导航,html,css,margin,Html,Css,Margin,设置margin:0在header{}或nav{}中不起作用，但在ul{}中起作用。我认为ul{margin:0}不起作用，因为header和nav是父母 <head> <meta charset="UTF-8"> <title>Compañía</title> <link rel="stylesheet" href="estilo.css"> </head> <body> &l

设置
margin:0
在
header{}
或
nav{}
中不起作用，但在
ul{}
中起作用。我认为
ul{margin:0}
不起作用，因为
header
和
nav
是父母

<head>
    <meta charset="UTF-8">
    <title>Compañía</title>
    <link rel="stylesheet" href="estilo.css"> </head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Purchase</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>

</html>
这是因为您看到的边距来自
ul
，而不是
标题或
导航。
header
和
nav
在默认情况下已经有0页边距，因此添加
margin:0对其中任何一个都不起作用。但是，
ul
具有浏览器应用的默认边距，因此设置
ul{margin:0；}
将删除该默认边距

您看到的
ul
的边距超出了其父级的边界，因为

如果没有创建边框、填充、内联内容、块\u格式\u上下文或清除以将块的页边距顶部与其第一个子块的页边距顶部分开，或者没有边框、填充、内联内容、高度、最小高度或最大高度以将块的页边距底部与其最后一个子块的页边距底部分开，然后这些利润率就会崩溃。折叠的页边距最终位于父页边距之外

我认为“ul”的边际不应该影响他们的父母。@eag845它被称为“边际崩溃”。更新了我的答案。

body {
    margin: 0;
    padding: 0;
}

header {
    background-color: darkseagreen;
    height: 420px;
    margin: 0;
    padding: 0;
}

nav {
    margin: 0;
}