CSS: Правила організації відступів

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

Потрібно точно знати, як поведуться блоки при верстці, що відбудеться після змін. І тут допомагають правила організації відступів. Вони дозволяють легко змінювати, покращувати та масштабувати верстку. А їхнє знання вбереже вас від типових помилок.

Основні принципи роботи з відступами

Будь-який сайт чи документ має «потік» — порядок виведення об'єктів у документі. У верстці потік йде зверху донизу, зліва направо. Саме тому, якщо якийсь елемент на макеті знаходиться праворуч, у HTML-коді він має йти останнім у своїй групі.

Тому можна сформулювати перший принцип.

1. Відступи задаються від попереднього елемента до наступного

Це означає, що у верстці потрібно намагатися використовувати CSS-властивості margin-right і margin-bottom, тобто відступ праворуч і відступ знизу.

На зображенні видно, як правильно задавати відступи: тільки праворуч і знизу (показано помаранчевим)

Зовнішні відступи зверху та зліва (margin-top та margin-left) замінюються на аналогічні внутрішні відступи (padding) у батьківського елемента.

Виходить, що блок не може зрушуватися завдяки своїм відступам - він робить це тільки за рахунок сусідніх елементів і рухає сусідні.

2. Відступи задаються лише між сусідніми елементами у потоці

Якщо блок не має сусіда з лівого боку — ставити йому відступ ліворуч не можна. Те саме стосується будь-якої зі сторін.

Давайте поглянемо на приклад:

На зображенні – простий блок: два списки, розділені відступами.

В обох заданий відступ знизу. Для першого списку це можна застосувати, тому що є сусід знизу — другий список. А для другого, який не має такого сусіда, відступу немає.

На зображенні типова помилка верстки: випадання відступів. Відступ є, але він не збільшує розмір «батька» з блакитним тлом.

3. Останньому елементу групи потрібно обнулювати відступ

Це легко зробити за допомогою псевдокласів у CSS. Наприклад, за допомогою :last-child, який дозволяє вибрати останній елемент із групи.

У нашому випадку знайдемо останній елемент списку. :last-child обнуляє відступ у останнього ul. Тепер все працює як слід.

ul {
  margin-bottom: 30px;
}

ul:last-child {
  margin-bottom: 0;
}

Щоб не створювати два селектори, можна написати коротше, використовуючи псевдоклас: not. Тут ми буквально говоримо наступне: «Задай відступ усім ul, крім останнього».

ul:not(:last-child) {
  margin-bottom: 30px;
}

4. Не можна ставити відступи БЕМ-блокам

Наступний принцип стосується БЕМ – спеціального підходу до найменування класів. Є така сутність як БЕМ-блок: його можна вставляти в будь-яку частину сайту, і стилі перенесуться разом з ним.

Уявіть, що БЕМ-блок використовується і у шапці, і у підвалі сайту. При цьому в шапці йому потрібен відступ, а у підвалі – ні.

Якщо такому блоку встановити відступи, виникне проблема. Відступи з'являться і там, і там — адже стилі БЕМ-блоку, як ми пам'ятаємо, переносяться. Саме тому відступи зазвичай роблять через модифікатори чи міксування класів.

<div class="card">
	<h4 class="title">Заголовок картки</h4>
	<p>Опис у 2 рядка</p>
</div>
<div class="card">
	<h4 class="title title--2">Заголовок картки</h4>
	<p>Опис у 2 рядка</p>
</div>

У цьому прикладі є два заголовки (БЕМ-блоки) title. І саме другому з них потрібно поставити відступ. Для цього використовуємо модифікатор .title-2, але не робимо відступ для всіх .title на сторінці.

Типовий приклад: відступи у картці

Розглянемо реалізацію картки із контентом на сайті. Як тут краще вчинити?

У нашому прикладі найпростіша картка: з картинкою, заголовком та описом. Як правильніше зробити відступи біля заголовка та опису? Насправді, все дуже просто: потрібно застосувати принципи, про які я розповів.

Нам достатньо обернути весь текст картки в блок і задати блоку внутрішній відступ - padding. Так наша верстка відповідатиме одразу трьом принципам. А щоб зробити відступ між заголовком та описом, досить просто зробити відступ знизу – для заголовка.

Висновки

Отже, повторимо принципи роботи з відступами:

Відступи задаються від попереднього елемента до наступного.
Відступи задаються лише між сусідніми елементами у потоці.
Останньому елементу групи потрібно обнулювати відступ.
Не можна ставити відступи БЕМ-блоків.

Це чотири основні правила організації відступів, які допоможуть вам зробити верстку якісною та гнучкою. Головне - почати їм слідувати. Згодом їх дотримання увійде у звичку, і ви розумітимете, де можна припуститися помилки і як її уникнути.

P.S. перекладати зображення було вже влом, основна ціль була - накидати шпаргалку, щоб ділитися нею, а не російським сайтом