Padding в CSS: способи встановлення і особливості відтворення

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

Група padding-властивостей

Для опису padding в CSS існує ціла група властивостей. Це: padding-top - управляє величиною верхнього поля; padding-right - змінює відступ; padding-bottom - контролює розмір нижнього паддінга; padding-left - встановлює ширину відступу зліва. Загальна властивість padding в CSS дозволяє визначити всі чотири поля в одному правилі. Інструкція може приймати від одного до чотирьох аргументів:


4 параметра. Паддинги перераховуються за годинниковою стрілкою, починаючи з верхнього. Запис використовується, якщо кожна сторона має свій розмір відступу.

//padding: padding-top padding-right padding-bottom padding-left
.element {
padding: 10px 20px 30px 40px;
}

• 3 параметра. Якщо бічні поля рівні, їх можна згрупувати в один аргумент. Порядок перерахування: верхнє, ліве і праве, нижнє поле.

  //padding: padding-top padding-right+padding-left padding-bottom 
 .element {
 padding: 10px 20px 30px; 
}  

• 2 параметра. Попарная угруповання верхнього з нижнім і лівого з правим полів.

  //padding: padding-top+padding-bottom padding-right+padding-left 
 .element {
 padding: 10px 20px; 
}  

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

  .element {
 padding: 10px; 
}  

Місце в структурі блоку

Величина padding в CSS за замовчуванням включається в загальну величину займаного елементом місця.

  .block1 {
 width: 100px; 
 height: 100px; 
 padding-right: 30px; 
 padding-top: 20px; 
}  

Для елемента .block1 реальний розмір буде складати 130px в ширину і 120px у висоту. Властивості width і height за замовчуванням визначають розмір тематичній області, а padding в CSS вимірюється окремо.

Одиниці виміру

Вказати величину паддінга можна в будь-яких одиницях відстані, використовуються в CSS - пікселях, відсотках, em або rem.

Важливо: якщо відступ визначено у відсотках, він завжди буде відраховуватися від ширини БАТЬКІВСЬКОГО елемента, навіть якщо мова йде про верхньому або нижньому полі.

  .parent {
 width: 200px; 
 height: 100px; 
} 
 .block2 {
 height: 30px; 
 width: 100px; 
 padding-bottom: 10%; 
}  

Для блоку block2 величина нижнього паддінга буде становити 20px (10 % від 200px), а реальна висота дорівнює 50px.

На відміну від зовнішніх відступ (margin) padding в CSS не може бути менше нуля. При передачі в інструкцію від'ємного значення воно просто буде проігноровано браузером.

Поля рядкових елементів

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

Для блоків, які є частиною рядки, значення верхнього і нижнього полів завжди ігноруються, так як можуть порушити побудова.

  span {
 padding-left: 30px; 
 padding-right: 20px; 
 padding-top: 50px; 
 padding-bottom: 40px; 
}  

Ліворуч і праворуч від елементів span з'являться відповідні інструкції відступи, але вертикального зсуву рядка не буде. Насправді браузер встановить блоку необхідні поля, але це не має значення, так як вони не впливають на його місце в загальному потоці. Властивість padding в CSS добре підтримується всіма браузерами, включаючи самі старі, а також може бути анімоване з допомогою інструкцій animation і transition.