Хоча вони можуть робити схожі речі, між padding (відступами) і margin (допусками) WordPress є важлива різниця, яку потрібно знати, щоб налаштувати свій сайт за допомогою CSS.
Нижче ми опишемо ключові відмінності між ними, чому вони використовуються і коли розгортати кожен із них для отримання бажаних результатів.
У чому різниця між padding та margin у WordPress?
І відступи, і допуски використовуються збільшення місця на сторінках WordPress. Хоча те, де кожен із них додає цей простір і як це впливає на сайт, відрізняються.
Коротше кажучи, термін «відступ» (padding) відноситься до простору, що оточує контент всередині блоку, а «допуск» (margin) відноситься до простору, що розділяє окремі блоки.
При ефективному використанні обидва можуть виявитися неоціненними для створення макетів, що настроюються, і поліпшення адаптивного дизайну і оптимальної взаємодії з користувачем.
Ви можете побачити ключові відмінності в таблиці нижче, після чого ви зможете прочитати далі, щоб дізнатися більше про те, як, коли та де застосовувати кожну з них на веб-сайті WordPress.
| ОБМІТКА | МАРГІН |
| Додає простір усередині блоку. | Додає простір поза блоку. |
| Не впливає на інші блоки сторінок. | Впливає на інші блоки сторінок. |
| Найкраще підходить для зміни стилю та макета окремих блоків. | Найкраще підходить для зміни стилю та макету всієї сторінки. |
| Працює лише з блоками з кордонами. | Працює на всіх блоках із кордонами та без них. |
| Не підтримує автоматичних та негативних значень. | Підтримує автоматичні та негативні значення. |
| Можна налаштувати колір фону доданого простору. | Створює лише прозорий простір, який неможливо налаштувати та віддати йому колір. |
Що таке відступи в WordPress та як їх використовувати?
Padding - це властивість CSS (каскадні таблиці стилів), що впливає на область навколо контенту в блоці WordPress, додаючи простір навколо контенту для підвищення естетичної привабливості та зручності використання сайту.
Наприклад, якщо ви використовуєте блок «Абзац» і виявляєте, що текст розташований надто близько до краю цього блоку, то можете розсунути його, щоб покращити читання.
Для цього використовуються відступи.
Тут у вас є два варіанти.
A. Управління padding у редакторі WordPress
Редактор записів та сторінок WordPress за замовчуванням включає елементи керування відступами та допусками для окремих блоків.
Щоб знайти його, переконайтеся, що вибрано опцію блок, потім прокрутіть вниз і натисніть "Розміри" (Dimensions).
Далі виберіть Padding.
Тут можна контролювати кількість відступів вгорі та внизу блоку,
а також і з боків.
Параметри Padding у редакторі WordPress
За промовчанням редактор WordPress додає однаковий простір з кожного боку.
Іншими словами, якщо ви додаєте простір до внутрішніх сторін блоку, установка повзунка на 4 пікселі додасть 4-піксельний простір як зліва, так і праворуч від контенту.
Аналогічним чином, регулювання верхнього та нижнього повзунка додасть однаковий простір вгорі та внизу.
У багатьох випадках це працює нормально, але якщо ви хочете налаштувати простір з кожної сторони (наприклад, додавши більше місця ліворуч, ніж праворуч), то можете це зробити, відкривши параметри Padding.
Для цього натисніть на значок, схожий на перехрестя.
Тут ви можете вибрати верхню, нижню, ліву або праву частину блоку контенту і налаштувати простір поряд з кожним з них індивідуально.
Налаштування відступів у редакторі WordPress
Ще одна річ, яку редактор WordPress робить за умовчанням, це дозволяє регулювати відступи тільки цілими числами від 1 до 6 пікселів.
Хоча вам рідко знадобиться відступ більше 6 пікселів, ймовірно, настане момент, коли захочеться відрегулювати відступи на певну частку, наприклад, 2,5 пікселя або 3,75 пікселя.
Ви можете зробити це, торкнувшись піктограми повзунка і вручну ввівши необхідний розмір відступу.
Дивіться також:
Б. Додавання Padding за допомогою CSS
Редактор WordPress, можливо, є найпростішим способом додавання відступів та керування ними, але якщо ви створюєте свою власну тему WordPress або вносите постійні налаштування для всього сайту, можете використовувати CSS.
Тут є чотири значення для керування кожною стороною блоку контенту:
- padding-top:
- оббивка-направо:
- padding-bottom:
- padding-left:
Ось приклад того, як це може бути:
У прикладі ми встановили верхнє та нижнє відступи на 25 пікселів, а праву та ліву сторони на 40 пікселів, що дає контенту достатньо простору.
Звичайно, додавання всіх чотирьох значень збільшує розмір файлу CSS, що може негативно вплинути на швидкість вашого сайту.
Один із способів протистояти цьому — просто використати скорочену властивість padding:, що дозволяє складати до чотирьох значень в одному рядку коду.
Ці значення виконуються у такому порядку:
- верх
- справа
- внизу
- зліва
Так, наприклад, на зображенні вище встановлено такі значення в пікселях:
- Верх – 25
- Праворуч – 30
- Внизу – 35
- Зліва – 25.
Однак, якщо дві або більше сторін мають однакове значення, то можна зробити це ще коротшим, наприклад:
У цьому випадку верхній padding складає 25 пікселів, нижній – 35, а лівий та правий – по 30 пікселів.
Якщо ви встановите відступ праворуч на 30 пікселів, але не вкажіть ліве значення, CSS автоматично використовує право значення, роблячи їх однаковими.
Це можна скоротити ще більше, якщо є одне значення для лівого та правого заповнення, а інше для верхнього та нижнього, то код виглядатиме так:
У цьому прикладі верхнє та нижнє відступи становлять 25 пікселів, а padding зліва та справа по 30.
Зрештою, якщо слід додати однаковий простір до всіх чотирьох сторін, це реально зробити за допомогою одного значення, наприклад:
У цьому випадку всі сторони div будуть мати відступи 25 пікселів.
Що таке Margin у WordPress і як використовувати?
У той час, як відступи дозволяють контролювати простір усередині блоку WordPress, допуски дозволяють контролювати простір за межами цього блоку.
Це може бути корисним для створення чистих та зручних макетів за рахунок налаштування простору між окремими блоками.
Наприклад, якщо у вас є блок зображення під блоком абзацу, можна використовувати властивість CSS margin, щоб додати більше місця між ними. Тоді сторінка виглядатиме менш захаращеною і легше пересуватиметься візуально.
Як і у разі відступів, ви можете налаштувати доступи між блоками, використовуючи редактор WordPress або власний CSS.
Давайте розглянемо обидва варіанти.
А. Налаштування Margin у редакторі WordPress
У редакторі WordPress margin можна налаштувати так, як ми змінювали властивості padding.
Спочатку виберіть блок, для якого хочете змінити допуск, а потім у меню «Блок» виберіть "Розміри".
На цей раз натисніть «Маржа».
За умовчанням можна додати рівний простір до горизонтальних та вертикальних сторін блоку.
Натиснувши піктограму перехрестя, можна точно налаштувати відстань на окремі сторони.
На скріншоті вище ми вибрали опцію виготовлений на замовлення, яка дозволяє налаштовувати кожну сторону окремо.
Однак, якщо потрібно налаштувати лише одну сторону, то оберіть її індивідуально, як ми зробили тут із простором у верхній частині блоку.
Б. Налаштування полів у WordPress за допомогою CSS
Якщо ви волієте керувати допусками за допомогою CSS, то можете зробити це, використовуючи наступні чотири значення:
- margin-top:
- margin-right:
- margin-bottom:
- margin-left:
Ось приклад того, як це може виглядати у вашому CSS-файлі:
Знову ж таки, можете зменшити обсяг необхідного коду, використовуючи скорочену властивість, яка в даному випадку має вигляд:
маржа:
Значення, що йдуть за цією властивістю, виконуються в тому ж напрямку за годинниковою стрілкою, що і в padding, тобто зверху, праворуч, знизу, зліва, наприклад:
У цьому прикладі верхнє поле – 10 пікселів, праве поле – 20, нижнє поле – 15 і ліве поле – 25 пікселів.
Якщо один набір відповідних значень (ліворуч/праворуч або зверху/знизу) однаковий, можна його ще скоротити до трьох значень:
Код показує, що верхнє поле дорівнює 10, а нижнє - 15 пікселів, причому значення 20 пікселів визначає обидві вертикальні сторони.
Якщо обидва набори відповідних значень однакові, використовуйте два значення: одне для горизонтального інтервалу, а інше для вертикального, наприклад:
У цьому випадку значення застосовують наступним чином:
- Верхнє та нижнє поля: 10 пікселів.
- Праве та ліве поле: 20 пікселів.
І, звичайно, якщо всі ваші значення однакові, потрібно вказати лише одне значення, наприклад:
У цьому випадку до всіх чотирьох сторін (зверху, праворуч, знизу та зліва) застосовується одне значення, а всі поля матимуть значення 15 пікселів.
Використання автоматичних та негативних значень margin у CSS
Однією з істотних відмінностей між відступами і полями WordPress є те, що останній підтримує як автоматичні, так і негативні значення.
Значення auto часто використовується для горизонтального центрування елемента всередині його контейнера та автоматичного розподілу доступного простору порівну ліворуч та правою стороною.
Тут потрібно спочатку вказати ширину блокового контейнера, а потім використовувати значення
автомобіль;
щоб розділити простір, що залишився, порівну між горизонтальними полями.
Нарешті, можна використовувати негативні значення для створення елементів, що перекриваються, — метод, який ідеально підходить для створення унікальних сіток і макетів.
У цьому прикладі позитивне поле в 10 пікселів застосовується до верхньої, лівої та нижньої сторін, а негативне поле -20 пікселів застосовується до правої сторони, що призведе до того, що елемент перекриватиме свій контейнер з правого боку на 20 пікселів.
Коли використовувати padding або margin у WordPress
Коли використовувати margin
Найкращий варіант для використання margin це коли ви хочете вплинути на макет сторінки.
Переміщення окремих блоків вгору, вниз, ліворуч або праворуч за допомогою властивості CSS Margin впливає на інші навколишні блоки, що загалом впливає на всю сторінку. Тому рекомендується використовувати його під час роботи над дизайном сторінки.
Використовуючи негативні значення можна змінити простір між двома існуючими елементами або створити унікальні блоки, що перекриваються,
Коли використовувати padding
Краще використовувати відступи, коли необхідно створити простір між контентом і межею блоку, що містить його.
Це може бути особливо корисним при використанні елементів адаптивного дизайну, таких як інтерактивні кнопки.
Додавання відступів навколо мітки кнопки природним чином збільшить розмір кнопки, зробивши її помітнішою та полегшує натискання на мобільних пристроях.
Важливо відзначити, що відступ впливає лише на елементи з межами. Якщо ви використовуєте блоки без кордонів, потрібно буде повторно застосувати кордони або спробувати досягти того ж результату, використовуючи допуски.
З іншого боку, відступи мають одну перевагу перед допусками: можна змінити колір фону створюваного простору, щоб ще більше підвищити естетичну привабливість сторінки.
Допуски не підтримують цю можливість і лише створюють прозорий простір, тобто фон залишається таким самим, як і решта сторінки.
Padding та margin обидва мають унікальні можливості, які можуть покращити дизайн сайту: допуски дозволяють перекривати елементи для створення унікальних макетів, а відступи – змінювати колір фону простору навколо контенту.
Нарешті, варто відзначити, що ви отримаєте максимальну користь від відступів та допусків з темою, що базується на блоках WordPress.
Джерело: wplift.com
Коментарі до запису: 0