Маржа 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; к любому из них ничего не сделает. A ul, однако, имеет по умолчанию маржу, которая применяется браузером, поэтому установка ul { margin: 0; } удаляет этот марж по умолчанию.

Вы видите разницу в ul вне пределов его родителя (s) из margin collapse

Если нет границы, обивка, встроенного контента, block_formatting_context создан или зазор, чтобы отделить край -top блока с края верхней части его первого дочернего блока или без границы, заполнения, встроенного содержимого, высоты, минимальной высоты или максимальной высоты, чтобы отделить нижний край блока от края поля его последний ребенок, тогда эти поля рушится. Разрушенный край заканчивается вне родителя.

источник

2017-02-12 02:57:45

Я думаю, что край «ul» не должен влиять на их родителей. – eag845

@ eag845 это называется «крах краха». Обновлен мой ответ. –

Маржа 0 в заголовке, навигация

ответ

Смежные вопросы