Внутрішні відступи блоку (paddings, падінги) — це простір між контентом блоку та межою, яка відокремлює наповнення блоку. Наприклад, на типовому моніторі (скажімо, з роздільною здатністю 1920*1080 пікселів) наповнення блоку матиме ширину 1200 пікселів (велика центральна колонка у якій розташовані усі елементи блоку) — у цій статті розглянуто, як змінити внутрішній відступ від бокових меж цієї центральної колонки з контентом (content area) до самого контенту блоку.

Наприклад, ви можете збільшити чи зменшити бокові відступи одночасно для усіх блоків на вашому сайті. Також можна вказати різну ширину відступів залежно від різної ширини екрану — окремо для відображення сайту на типових екранах комп'ютера, планшета, смартфона тощо.

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

Перевірка ширини бокових відступів

Ви можете перевірити ширину відступів за допомогою інструментів розробника (Devtools) вашого браузера. У цій статті йде мова про зміну бокових відступів блока саме у головній центральній частині блока, у якій розміщується увесь контент. У DOM-дереві сайту цей HTML-елемент має клас w-section__inner і є дочірнім елементом (знаходиться всередині) HTML-тегу <section>, що наявний у кожному блоці (окрім шапки сайту). На скриншоті зеленим кольором зображено простір, ширину якого можна змінювати кодом з цієї статті:


Підказка: ви можете відкрити інструменти розробника (Devtools) вашого браузера на Windows за допомогою кнопки F12 чи комбінацій клавіш Ctrl+Shift+C. На MacOS — Cmd+Option+I.
Зверніть увагу: у звичайних блоках в середині сторінки HTML-тег <section> має вигляд <section class="w-section">, у той час як у футері він має інші класи, наприклад, <section class="footer w-section--footer w-section--no-v-padding">.

Зміна внутрішніх бокових відступів для усіх блоків на сайті

У цьому розділі наведено код для зміни бокових відступів за різної ширини екрану. Ви можете скопіювати цей код та змінювати ті значення ширини відступів, що вказані у кожному рядку після двокрапки. Наприклад, за думкою певних дизайнерів, інколи доцільно збільшити внутрішні відступи за ширини екрану 768-991 пікселів — для цього вам необхідно змінити значення за замовчуванням 32px на, скажімо, 40px. Тоді рядок з кодом --ui-content-gutter-768: 32px; буде виглядати як --ui-content-gutter-768: 40px;.

Код-заготовка для зміни бокових відступів блоку за різної ширини екрану:

:root {
  --ui-content-gutter-320: 24px; /* за ширини екрану 320-480 пікселів */
  --ui-content-gutter-480: 24px; /* за ширини екрану 480-767 пікселів */
  --ui-content-gutter-768: 32px; /* за ширини екрану 768-991 пікселів */
  --ui-content-gutter-992: 40px; /* за ширини екрану 992-1279 пікселів */
  --ui-content-gutter-1200: 15px; /* за ширини екрану 1280 пікселів та більше */
}

Ви можете додати цей код до вашого сайту у його налаштуваннях у розділі Сторонній код у вкладці CSS. Детальніше додавання CSS-коду описане у цій статті.

Підказка: у коді між позначками /* та */ знаходяться коментарі, які не впливають на код. Їх необов'язково копіювати, проте вони допоможуть вам орієнтуватися в коді у подальшому.
Підказка: за бажанням ви можете залишити лише ті властивості CSS-коду, які ви змінювали — усі інші властивості (рядки зі значеннями у пікселях) у коді вище мають значення за замовчуванням (дублюють внутрішній код Weblium), тому копіювати їх усі необов'язково.
Примітка: у коді вище використані CSS-змінні. Кожна з них має назву, що завершується на певне число, яке позначає найменшу ширину екрану у пікселях, за якої діє ця ширина внутрішніх бокових відступів блоку. Однак останній рядок коду для зміни відступів на екрані комп'ютера має назву, пов'язану із шириною контейнера з контентом на сайті. Контейнером у цьому випадку виступає частина екрану, яка обчислюється як ширина екрану мінус границя (border), внутрішні (paddings) та зовнішні (margins) відступи блоку і становить 1200 пікселів за ширини екрану 1280 пікселів і більше. До цього, за ширини екрану 992-1279 пікселів, внутрішні відступи займають 80 пікселів (40 з обох боків блоку).

Оновлено: 05/12/2023