Загрузка...

Внутренние отступы (padding) в CSS

Margin раздвигает коробки. Часто нужно место и внутри коробки — чтобы текст не лип к границе, а кнопки было удобно нажимать. Эта внутренняя подушка — padding.

Что такое padding?

Padding — пустое пространство между содержимым элемента и его границей. Живёт внутри границы. Больше padding — содержимое дальше от краёв, коробка обычно растёт (если позже не смените box-sizing).

Padding против margin одним взглядом

Их легко перепутать. Держите задачи раздельно.

📊 Padding против margin

Инструмент Где сидит Повседневная задача
padding Внутри границы Подушка для текста, больше зона клика
margin Снаружи границы Отделить эту коробку от соседей
Фон Обычно заполняет padding Цвет/картинка часто покрывает подушку
Вертикальный collapse Padding не схлопывается Margin сложенных блоков могут

Одинаковый padding на каждой стороне

Начните с одной длины для спокойной карточки.

Одинаковый padding на всех сторонах

css
CSS Code 
.card {
padding: 16px;
border: 1px solid #cbd5e1;
background-color: #ffffff;
margin: 12px; /* внешний зазор — другой инструмент */
}

Что нужно заметить

Текст отодвигается от серой границы. Белый фон заполняет и зону padding — не только буквы.

Два значения — вертикаль, потом горизонталь

Две длины связывают противоположные стороны: сначала верх и низ; затем лево и право.

Вертикальный затем горизонтальный padding

css
CSS Code 
.panel {
padding: 20px 12px;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}

Четыре значения — по часовой сверху

Когда каждой стороне нужна своя подушка: верх → право → низ → лево.

Четырёхстороннее сокращение padding

css
CSS Code 
.note {
padding: 8px 16px 24px 16px;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}

Кнопки любят padding

Padding увеличивает удобную зону нажатия, не меняя размер текста подписи. Короткая подпись с щедрым padding ощущается современной и лёгкой для клика.

Кнопка с padding

css
CSS Code 
.btn {
padding: 0.6rem 1.25rem;
border: none;
border-radius: 8px;
background-color: #0f766e;
color: #ffffff;
}

Фон заполняет padding

В отличие от margin (снаружи), padding всё ещё часть окрашенной коробки элемента. Цвет или изображение фона обычно покрывают зону padding.

Цветная зона padding

css
CSS Code 
.banner {
padding: 24px;
background-color: #0f766e;
color: #ffffff;
border: 4px solid #042f2e;
}

Попробуйте сами

  1. Карточка с padding: 16px и видимой границей — текст не липнет к краю.
  2. Перепишите как padding: 20px 12px и почувствуйте более высокую vs более широкую подушку.
  3. Кнопка с горизонтальным padding больше вертикального.
  4. Бирюзовый баннер с большим padding и более тёмной границей — цвет заполняет подушку.
  5. Две карточки только с margin между ними, затем только padding внутри одной — почувствуйте разные задачи.

Частые ошибки

  • Использовать padding, чтобы раздвинуть коробки (это работа margin)
  • Ждать, что padding между соседями схлопнется как вертикальные margin (не схлопывается)
  • Забывать, что фон обычно рисуется через зону padding
  • Огромный padding на каждой стороне, когда скромная шкала читается чище
  • Путать порядок четырёх значений (верх, право, низ, лево)

Кратко

  • Padding — внутреннее пространство между содержимым и границей
  • Сокращение: 1, 2 или 4 значения (четыре по часовой сверху)
  • Фон обычно заполняет зону padding
  • Padding не схлопывается так, как могут вертикальные margin
  • Кнопки и карточки опираются на padding для комфорта
  • Margin остаётся внешним родственником — держите оба инструмента острыми

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок