Почему-то в этом задании когда добавляем правило padding: 20px; для nav, сверху и снизу у nav добавляется не по 20 пикселей, а примерно по 40. С чем это связано?
Конкретно у nav паддинг будет таким, каким вы его зададите — в данном случае 20px. Но у заголовка «Записи в блоге» есть свои отступы, которые складываются с отступом nav. Это можно увидеть через инструменты разработчика (F12).
Станислав, это связано с тем, что у заголовка h2 заданы верхние и нижние маргины, а у неупорядоченного списка - нижний маргин.
Вначале эти маргины не видны, т.к. для маргинов дочерних элементов характерно вываливание за границы родительского контейнера, если у него отсутствуют границы/паддинги. Подробно эта особенность рассмотрена здесь: https://htmlacademy.ru/courses/44/run/10
Именно поэтому когда вы прописываете паддинги nav, маргины ul и h2 перестают вываливаться.
Аналогичное поведение будет, если прописать правило nav, h2, ul {border: 1px solid black;} - у nav появится установленная граница и вы увидите эти маргины, т.к. они тоже перестанут вываливаться за пределы nav.
Владимир! Спасибо большое за объяснение. Только я вот заметил еще, что, по всей видимости, и у неупорядоченного списка также задан верхний маргин, просто он накладывается на соседний нижний маргин заголовка h2. Видимо это происходит потому, что дочерние элементы “Зажаты” в родительском контейнере и накладывающимся маргинам некуда деваться. Тем не менее не совсем ясно, почему эти соседние маргины накладываются друг на друга, но при этом не накладываются на соседний элемент, перекрывая его содержимое? Ведь ни у h2 ни у ul паддинги и границы не заданы!
Да, у списка тоже есть верхний маргин, он по величине чуть меньше нижнего маргина h2. Происходит схлопывание вертикальных маргинов соседних блочных элементов, при котором отображаемое расстояние между блоками по вертикали = наибольшему значению из двух вертикальных маргинов соседних элементов: https://htmlacademy.ru/courses/44/run/9
Потому что игнорирование полем одного элемента области содержимого другого элемента (“вываливание”) - это явление, характерное для родительского контейнера без границы/паддинга и его дочернего элемента (например, nav и h2). Между самим дочерними элементами (h2 и ul) такой связи не существует.
Вызов: https://htmlacademy.ru/courses/307/challenge/4.
Вот стили:
body {
width: 550px;
margin: 0;
padding: 0 10px;
}
.image-map {
display: flex;
flex-wrap: wrap;
width: 290px;
height: 290px;
margin: auto;
background-color: navy;
border-radius: 5mm;
padding: 5px; /У .image-map задан paggind/
}
img {
border-radius: 50%;
border-width: 5px;
border-style: solid;
margin: 15px; /у img (дочернего элемента для .image-map) задан margin/
}
.pic-1 {
border-color: blueviolet;
}
.pic-2 {
border-color: coral;
}
.pic-3 {
border-color: crimson;
}
.pic-4 {
border-color: deepskyblue;
}
- Почему при заданном padding’e у родительского элемента происходит вываливание marginov дочерних элементов img, да еще и вываливание самих элементов img?
- margin: 15px я поставил, чтобы посмотреть, как поведут себя маргины. В самом задании я задал margin: 5 px и вываливания не происходит, но почему-то задание удается выполнить только на 99%. Это, конечно, хороший результат, но как бы я ни задавал значение border-radius для .image-map, точнее результата, чем при border-radius: 5mm мне достичь не удается. Максимум 99%. Подскажите, как еще более точно можно задать скругление уголков у .image-map?
На второй вопрос я ответ нашел: нужно было задать величину в пунктах: border-radius: 15pt;
Нашел ответ на первый вопрос: потому что img - строчный элемент. И не зависимо от того, задана ли граница и паддинг у родительского контейнера, выпадание из блока контента родителя вертикальных паддингов и вертикальных маргинов элемента img будет происходить.