[27/32] 100% Но меня терзают смутные сомнения

Курсы §15. Сетки
1

Уважаемые знатоки верстки! Хотя я прошла испытание на 100%, но очень сомневаюсь в адекватности собственного кода. А в стилях мне даже трижды пришлось использовать не кратные 5 маргины. Подскажите, пожалуйста, где собака порылась?

HTML

[code]

Испытание: строим сетку
Header
Menu
Promo 1
Promo 2
Left
Main
Right
Footer
[/code]

CSS

html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:335px;
font-family:‘Arial’, sans-serif;
font-size:10px;
color:white;

}

.layout-positioner {
width: 350px;
margin: 0 auto;
}

.layout-positioner::after {
content: ‘’;
display: table;
clear: both;
}

header {
background: #34495e;
padding-top: 1px;
}

.header-box {
background: #c0392b;
min-height: 30px;
margin-top: 9px;
margin-bottom: 10px;
padding-top: 5px;
padding-left: 5px;
}

nav {
background: #3498DB;
}

.menu-box {
min-height: 30px;
padding-top: 5px;
padding-left: 5px;
}

.promo {
background: #34495e;
padding-top: 1px;
}

.promo .layout-column {
background: #c0392b;
float: left;
min-height: 55px;
width: 165px;
margin-top: 9px;
margin-bottom: 10px;
margin-right: 10px;
padding-top: 5px;
padding-left: 5px;
}

.promo .layout-column:last-child {
margin-right: 0;
}

.features {
padding-top: 1px;
}

.features .layout-column {
float: left;
min-height: 105px;
width: 65px;
margin-top: 9px;
margin-bottom: 10px;
margin-right: 10px;
background: #3498DB;
padding-top: 5px;
padding-left: 5px;
}

.features .layout-column:nth-child(2) {
width: 185px;
}

.features .layout-column:last-child {
margin-right: 0px;
}

footer {
background: #34495e;
}

.footer-box {
min-height: 35px;
padding-top: 5px;
padding-left: 5px;
}

2

Здесь не надо быть знатоком.
Отступ между элементами сверху 10px, вы разбили эту величину на внутренний отступ 1px и 9px внешний. В двух местах можно записать как внешний отступ 10px, а для header как внутренний. Тогда всё будет кратно 5.

2 лайка
3

Спасибо за пояснение. Я в самом деле подозревала, что это из-за свойства padding: 1px, но боялась, что если уберу его, то внешние отступы будут выпадать - по аналогии с header. Сейчас в переделала и в header сделала внутренний отступ 10px, а в остальных местах внешние отступы по 10px. Только вот не пойму, почему margin выпадает только в header, а в других блоках прекрасно приживается. Чего-то я не поняла и не усвоила. И это плохо. Пожалуйста, поясните этот момент с выпаданием внешних отступов.

4

Про этот эффект было рассказано в курсе “Блочная модель документа” https://htmlacademy.ru/courses/44/run/10

5

Благодарю. Перечитала этот раздел курса. Провела эксперимент: убрала флоаты из родительских блоков и оставила только по одному “обычному” блоку. Внешние отступы сразу выпали. Добавила родительским блокам padding и всё нормализовалось. Значит правило выпадения внешних отступов на плавающие элементы не действует, т.к. родительский блок их не видит?

6

Да, на плавающие элементы не действует. Статья по теме.

1 лайк