Пошук уроків, статей та іншого контенту
Опануйте внутрішні відступи елементів і зрозумійте, як padding впливає на доступний простір та розмір блока.
paddingpadding — це внутрішній відступ елемента. Він створює простір між вмістом елемента та його рамкою (border).
.card {
padding: 20px;
}У цьому прикладі з усіх чотирьох боків елемента буде внутрішній відступ 20px
Схематично блок виглядає так:
зовнішній простір
┌─────────────────────────────┐
│ border │
│ ┌─────────────────────┐ │
│ │ padding │ │
│ │ ┌─────────────┐ │ │
│ │ │ content │ │ │
│ │ └─────────────┘ │ │
│ └─────────────────────┘ │
└─────────────────────────────┘padding впливає на простір усередині блока, а margin — на простір зовні блока.
Для кожної сторони існує окрема CSS-властивість:
.box {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}Властивості означають:
padding-top — верхній внутрішній відступ;
padding-right — правий внутрішній відступ;
padding-bottom — нижній внутрішній відступ;
padding-left — лівий внутрішній відступ.
У значеннях можна використовувати різні одиниці:
.box {
padding-top: 16px;
padding-right: 2em;
padding-bottom: 5%;
padding-left: 1rem;
}Для початку найчастіше використовують px або rem.
Замість чотирьох окремих властивостей можна використати padding.
.box {
padding: 20px;
}Значення застосовується до всіх чотирьох сторін:
зверху — 20px;
праворуч — 20px;
знизу — 20px;
ліворуч — 20px.
.box {
padding: 10px 20px;
}Перше значення задає відступи зверху та знизу, друге — праворуч і ліворуч:
padding: верх/низ ліво/право;Це еквівалентно:
.box {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
padding-left: 20px;
}.box {
padding: 10px 20px 30px;
}Значення застосовуються так:
padding: верх ліво/право низ;Отже:
зверху — 10px;
праворуч і ліворуч — 20px;
знизу — 30px.
.box {
padding: 10px 20px 30px 40px;
}Значення йдуть за годинниковою стрілкою, починаючи зверху:
padding: верх право низ ліво;Цей порядок можна запам’ятати як рух від верхньої сторони за годинниковою стрілкою.
padding змінює розмір блокаЗа стандартної моделі коробки CSS (content-box) властивість width визначає ширину лише області вмісту.
Наприклад:
.box {
width: 200px;
padding: 20px;
border: 2px solid black;
}Фактична ширина блока буде:
200px + 20px + 20px + 2px + 2px = 244pxТобто:
200px — ширина вмісту;
20px — лівий padding;
20px — правий padding;
2px — ліва рамка;
2px — права рамка.
Так само padding збільшує висоту, якщо для елемента задано height.
.box {
height: 100px;
padding: 10px;
border: 2px solid black;
}Фактична висота становитиме:
100px + 10px + 10px + 2px + 2px = 124pxРозглянемо картку з заголовком, текстом і кнопкою:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Внутрішні відступи</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.card {
max-width: 360px;
padding: 24px;
background-color: white;
border: 1px solid #d9d9d9;
border-radius: 8px;
}
.card__title {
margin: 0 0 12px;
color: #222;
}
.card__text {
margin: 0 0 20px;
color: #555;
line-height: 1.5;
}
.card__button {
padding: 10px 16px;
color: white;
background-color: #1769aa;
border: 0;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<article class="card">
<h1 class="card__title">Вивчаємо CSS</h1>
<p class="card__text">
Padding створює простір між вмістом елемента та його рамкою.
</p>
<button class="card__button" type="button">Докладніше</button>
</article>
</body>
</html>У цьому прикладі:
padding: 24px створює внутрішній простір усередині картки;
padding: 10px 16px робить кнопку вищою та ширшою навколо її тексту;
текст і кнопка не торкаються країв картки завдяки padding у .card;
margin у заголовка та абзацу створює проміжки між окремими елементами.
padding і box-sizingВластивість box-sizing визначає, як браузер обчислює ширину та висоту блока.
Найпоширеніші значення:
.box {
box-sizing: content-box;
}За замовчуванням використовується content-box. У цьому режимі width і height задають лише розмір вмісту, а padding і border додаються до нього.
.box {
box-sizing: border-box;
}У режимі border-box задані width і height включають:
область вмісту;
padding;
border.
Наприклад:
.box {
width: 300px;
padding: 20px;
border: 4px solid black;
box-sizing: border-box;
}Зовнішня ширина блока залишиться 300px. Внутрішня область вмісту стане меншою, щоб у межах 300px помістилися також відступи та рамка.
Часто на початку стилів використовують:
* {
box-sizing: border-box;
}Це робить розрахунок розмірів більш передбачуваним.
padding у відсоткахВідсотковий padding обчислюється від ширини контейнера, навіть якщо він заданий для верхньої або нижньої сторони.
.container {
width: 400px;
}
.box {
padding: 5%;
}У цьому випадку 5% становитиме 20px, оскільки:
400px × 5% = 20pxВідсотки можуть бути корисними для адаптивних елементів, але для звичайних внутрішніх відступів часто зручніше використовувати px або rem.
padding і розмір вмістуВнутрішній відступ не стискає текст автоматично. Він лише відсуває текст від країв елемента.
.text-box {
width: 240px;
padding: 20px;
background-color: #e8f3ff;
}За стандартного content-box ширина всієї коробки буде 280px без урахування рамки:
240px ширина вмісту + 20px ліворуч + 20px праворучЯкщо тексту стане більше, висота блока зазвичай збільшиться автоматично. Фіксована висота може створити проблему, якщо вмісту не вистачить місця.
paddingМожна явно прибрати внутрішній відступ:
.box {
padding: 0;
}Від’ємні значення для padding не допускаються:
.box {
padding: -10px; /* некоректне значення */
}Якщо потрібно перемістити елемент назовні або створити від’ємний простір, для цього використовують інші властивості, але padding не може бути від’ємним.
padding і margin.card {
padding: 20px;
}Відсуває вміст від країв картки.
.card {
margin: 20px;
}Відсуває саму картку від сусідніх елементів.
.box {
padding: 10px 20px 30px 40px;
}Це не довільний порядок. Значення відповідають сторонам так:
верх;
право;
низ;
ліво.
Якщо елемент має фіксовану ширину та content-box, доданий padding збільшує загальний розмір:
.box {
width: 100%;
padding: 20px;
}Щоб ширина включала внутрішні відступи, можна використати:
.box {
box-sizing: border-box;
}padding до елемента, якому потрібен зовнішній проміжокЯкщо потрібно збільшити відстань між двома блоками, використовуйте margin, а не padding.
Створіть блок із такими вимогами:
ширина — 300px;
внутрішній відступ зверху та знизу — 16px;
внутрішній відступ праворуч і ліворуч — 24px;
фон — світло-блакитний;
рамка — 1px solid #999.
<div class="notice">
Це повідомлення має внутрішні відступи.
</div>.notice {
box-sizing: border-box;
width: 300px;
padding: 16px 24px;
background-color: #e8f3ff;
border: 1px solid #999;
}Запис padding: 16px 24px означає:
16px зверху та знизу;
24px праворуч і ліворуч.
padding створює внутрішній простір між вмістом і рамкою елемента.
Для окремих сторін використовують padding-top, padding-right, padding-bottom і padding-left.
Скорочений запис може містити одне, два, три або чотири значення.
Чотири значення записуються за годинниковою стрілкою: верх, право, низ, ліво.
За content-box padding збільшує фактичний розмір блока.
За border-box задана ширина або висота вже включає padding і border.
padding впливає на простір усередині елемента, а margin — на простір навколо нього.
Від’ємні значення для padding не використовуються.