Вертикальні відступи або ще раз про margin

За мотивами недавньої статті «Розміщення полів і відступів у CSS». Пропоную доповнення з даного питання. Передбачається, що читач в курсі що є
margin
, і що таке Margin collapsing.

Вертикальні відступи або ще раз про margin

Допомога батькам
Відступи необхідно формувати за рахунок самого елемента, а не його змісту, тобто не варто забезпечувати відстань між сусідніми блоками за рахунок відступів їх дочірніх елементів.

Відступ між сусідніми блоками за рахунок відступів дочірніх елементів

Margin для padding
Як наслідок попереднього пункту,
margin
) першого і останнього елементів вертикального списку повинні бути нульовими, бо навіщо? Якщо потрібен відступ від зовнішніх меж батьків, використовуємо
padding
для батьків.

Margin для padding

Mixin для вертикального списку
Для реалізації всього вищеописаного вам знадобитися хелпер для розстановки
margin
з використанням нативного
not()
, наприклад такий.

// Scss

@mixin ritm($valueTop, $valueBottom:$valueTop) {

@if $valueTop != 0 {
@not include(':first-child') {
margin-top: $valueTop;
}
}

@if $valueBottom != 0 {
@not include(':last-child') {
margin-bottom: $valueBottom;
}
}
}

Докладніше.

Користувальницький контент

В користувальницький контент, в класичному розумінні, складається з параграфів, списків, зображень і т. п. Все це утворює умовний вертикальний список (практично однорідних) елементів. Всі вищеперелічені правила та застосовуйте для компонентів UGC.

Більш того, вказівка вертикальних
margin
для елементів UGC, дозволяє робити перестановки елементів контенту без шкоди для кінцевого результату.

// Scss

.ui-h3 {
@include ritm(1.5*$v, 1*$v);
}

.ui-img {
@include ritm(1*$v, 1.5*$v);

.ui-h3 + & {
margin-top: 1.5*$v;
}
}


Margin і Box-model
Варто зробити застереження, що margin є невід'ємною частиною блоку, хоч і сприймається як щось супутнє. Важливо розуміти, розміри блоку, а конкретно його ширина, не завжди одне і теж, що значення властивості width. Width — ширина це частини боксу від бордюру до бордюру, або розмір тематичній області в залежності від боксової моделі. При зміні боксової моделі (border-box / content-box), width може змінюватися, а розміри блоку при цьому залишаються незмінні.

Margin і Box-model
Each box has four edges: the margin edge, border edge, padding edge, and content edge.
developer.mozilla.org — Introduction_to_the_CSS_box_model
В ній у кожного боксу є 4 області: margin (зовнішні відступи), border (рамка), padding (внутрішні поля), і content (контент або вміст).
developer.mozilla.org — box_model
Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas;
www.w3.org — box-dimensions

Тонкощі перекладу, холивара заради:

— межа блоку ≠ border блоку, бордер — це border згідно специфікації, а межа блоку — це межа/край блоку
— block area = область блоку (читай розміри блоку), але
— block area ≠ область обмежена border'ом.

Чесно кажучи, наука-наукою, а щоденна робота вносить свої поправки в лексикон розробників.

PS. Дані доповнення мною були запропоновані в коментарях до вищезазначеної статті, але строгий НЛО вирізав всі теги унаслідок обмежених прав.

Джерело: Хабрахабр
  • avatar
  • 0

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.