//padding: padding-top padding-right padding-bottom padding-left
.element {
padding: 10px 20px 30px 40px;
}
//padding: padding-top padding-right+padding-left padding-bottom
.element {
padding: 10px 20px 30px;
}
//padding: padding-top+padding-bottom padding-right+padding-left
.element {
padding: 10px 20px;
}
.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.