标题中的页边距0，导航

设置margin: 0不在header{}或nav{}中，但在ul{}中按预期工作。我以为ul{margin:0}不会工作，因为header和nav是父母。标题中的页边距0，导航

<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

来源

2017-02-12 eag845

那是因为你所看到的保证金从ul未来，而不是header或nav。默认情况下，header和nav都有0余量，因此将margin: 0;添加到它们中的任何一个都不会执行任何操作。但是，ul具有由浏览器应用的默认保证金，因此设置ul { margin: 0; }会删除该默认保证金。

你所看到的ul它的边界之外的余量的父（S），因为margin collapse

如果没有边框，填充，内嵌的内容，block_formatting_context创建或间隙边缘分离 - 从其第一个子块的边缘顶部开始，或者没有边框，填充，内嵌内容，高度，最小高度或最大高度的块的顶部，以便将块的页边距底部与页边距其最后一个孩子，那么这些利润率就会崩溃。折叠后的保证金最终在家长之外。

来源

2017-02-12 02:57:45

我认为“ul”的边距不应该影响他们的父母。 – eag845

@ eag845它被称为“边缘崩溃”。更新了我的答案。 –

标题中的页边距0，导航

回答

相关问题