Есть несколько вопросов по отступам на конкретных примерах:
- Элементарный html-код.
div {
height: 100px;
}
<div class="header" style="background-color: red;">
</div>
<div class="content" style="background-color: blue;">
</div>
<div class="footer" style="background-color: green;">
</div>
Вопрос: откудого появляются отступы от краев? Я думал div должен занимать всю ширину.
- Удаление отступов.
Мне удалось удалить все отступы, указав у body margin: 0. Но почему margin, а не padding? Ведь margin это отступ между элементами, а body - единственный элемент. Логичнее было бы padding: 0.
body {
margin: 0;
}
div {
height: 100px;
}
<div class="header" style="background-color: red;">
</div>
<div class="content" style="background-color: blue;">
</div>
<div class="footer" style="background-color: green;">
</div>
- Почему добавляется отступ сверху div-а, при добавлении в него
body {
margin: 0;
}
div {
height: 100px;
}
<div class="header" style="background-color: red;">
<p></p>
</div>
<div class="content" style="background-color: blue;">
</div>
<div class="footer" style="background-color: green;">
</div>
- Почему пропал отступ (который появился в 3-ем пункте) и почему padding top и left отличаются? Ведь у тега р padding указано inherit?
body {
margin: 0;
}
div {
height: 100px;
padding: 10px;
}
p {
padding: inherit;
}
<div class="header" style="background-color: red;">
<p>text</p>
</div>
<div class="content" style="background-color: blue;">
</div>
<div class="footer" style="background-color: green;">
</div>