Question

设置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>

body {
    margin: 0;
    padding: 0;
}

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

nav {
    margin: 0;
}

Link to example image

Answer 1

这是因为您看到的保证金来自ul，而不是header或nav。默认情况下，header和nav都有0个边距，因此向其中任何一个添加margin: 0;都不会执行任何操作。但是，ul具有浏览器应用的默认边距，因此设置ul { margin: 0; }会删除该默认边距。

由于margin collapse

，您在ul超出其父母范围之外的边距

如果没有边框，填充，内联内容，block_formatting_context创建或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，分钟-height或max-height将块的边距底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

标题中的边距0，导航

1 个答案: