CSS Padding - Внутрішній відступ
Заповнення (внутрішній відступ) використовується для створення простору навколо вмісту елемента всередині будь-яких визначених меж.
Спробуйте самі »
CSS Padding - Внутрішній відступ
CSS властивості padding використовуються для створення простору навколо змісту елемента всередині будь-яких визначених меж.
Завдяки CSS у вас є повний контроль над відступом. Є властивості для встановлення відступів для кожної сторони елемента (згори, справа, знизу та зліва).
Padding - Окремі сторони
CSS має властивості для визначення відступу для кожної сторони елемента:
padding-top- вгоріpadding-right- справаpadding-bottom- знизуpadding-left- зліва
Всі властивості padding можуть мати наступні значення:
- length - визначає відступ в пікселях, pt, см і т.д.
- % - визначає відступ в % від ширини елемента, що його містить
- inherit - визначає, що відступ має бути успадковано від батьківського елемента
Примітка: Негативні значення не допускаються!
Приклад
Встановіть різні відступи для всіх чотирьох сторін елемента <div>
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Спробуйте самі »
Padding - Скорочена властивість
Щоб скоротити код, можна вказати всі властивості відступу в одній властивості.
Властивість padding - це скорочена властивість для наступних індивідуальних властивостей відступу:
padding-toppadding-rightpadding-bottompadding-left
Ось як це працює:
Якщо властивість padding має чотири значення:
- padding: 25px 50px 75px 100px;
- верхній відступ 25px
- правий відступ 50px
- нижній відступ 75px
- лівий відступ 100px
Приклад
Використовуйте скорочену властивість padding з чотирма значеннями:
div {
padding: 25px 50px 75px 100px;
}
Спробуйте самі »
Якщо властивість padding має три значення:
- padding: 25px 50px 75px;
- верхній відступ 25px
- правий і лівий відступи 50px
- нижній відступ 75px
Приклад
Використовуйте скорочену властивість padding з трьома значеннями:
div {
padding: 25px 50px 75px;
}
Спробуйте самі »
Якщо властивість padding має два значення:
- padding: 25px 50px;
- верхній і нижній відступи 25px
- правий і лівий відступи 50px
Приклад
Використовуйте скорочену властивість padding з двома значеннями:
div {
padding: 25px 50px;
}
Спробуйте самі »
Якщо властивість padding має одне значення:
- padding: 25px;
- всі чотири відступи 25px
Приклад
Використовуйте скорочену властивість padding з одним значенням:
div {
padding: 25px;
}
Спробуйте самі »
Padding та Width
CSS властивість width визначає ширину області змісту елементу. Область змісту - це частина всередині відступу, межі і поля елемента (блочна модель).
Якщо елемент має визначену ширину, доданий до цього елементу відступ буде додано до загальної ширини елемента. Часто це небажаний результат.
Приклад
Тут елемент <div> має ширину 300 пікселів. Однак фактична ширина елемента <div> буде 350 пікселів (300 пікселів + 25 пікселів зліва + 25 пікселів справа):
div {
width: 300px;
padding: 25px;
}
Спробуйте самі »
Щоб зберегти ширину 300 пікселів, незалежно від кількості відступів, ви можете використовувати властивість box-sizing. Це змушує елемент зберігати свою ширину; якщо ви збільшите відступ, доступний простір змісту зменшиться.
Приклад
Використовуйте властивість box-sizing, щоб ширина залишалася рівною 300 пікселів, незалежно від кількості відступів:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Спробуйте самі »
Більше прикладів
Встановіть лівий відступ
Цей приклад демонструє, як встановити лівий відступ елемента <p>.
Встановіть правий відступ
Цей приклад демонструє, як встановити правий відступ елемента <p>.
Встановіть верхній відступ
Цей приклад демонструє, як встановити верхній відступ елемента <p>.
Встановіть нижній відступ
Цей приклад демонструє, як встановити нижній відступ елемента <p>.
Перевірте себе за допомогою вправ!
Всі CSS властивості відступу
| Властивість | Опис |
|---|---|
| padding | Скорочена властивість для встановлення всіх властивостей відступу в одній об’яві |
| padding-bottom | Встановлює нижній відступ елемента |
| padding-left | Встановлює лівий відступ елемента |
| padding-right | Встановлює правий відступ елемента |
| padding-top | Встановлює верхній відступ елемента |
