Внутренние отступы (padding): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Свойство padding в CSS используется для создания пространства внутри элемента, между содержимым и его границей (border). В отличие от margin, который создает пространство вокруг элемента, padding работает внутри элемента. Padding может быть задан для всех сторон элемента одновременно или для каждой стороны отдельно (padding-top, padding-right, padding-bottom, padding-left). Также существуют сокращенные записи с разным количеством значений. Внутренний отступ всегда наследует цвет фона элемента. В этих заданиях вы научитесь применять padding различными способами, что поможет улучшить внешний вид ваших веб-страниц и сделать контент более удобным для восприятия.

Список тем

Базовое применение padding

В этом задании необходимо добавить внутренний отступ к элементу .box. Элемент имеет зеленый фон, и текст внутри должен находиться на расстоянии 20px от краев зеленого блока.

CSS

.box {
  background-color: #4CAF50;
  color: white;
  input1: 20px;
}

                     .box {
  background-color: #4CAF50;
  color: white;
  input1: 20px;
}

HTML

<div class="box">
  <p>Этот текст должен находиться на расстоянии от краев зеленого блока.</p>
</div>

Используйте свойство padding без указания конкретной стороны, чтобы применить одинаковый отступ со всех сторон. Синтаксис: padding: значение;

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Применение padding к отдельным сторонам

Нам нужно создать карточку товара, где текст имеет разные отступы сверху и снизу. Добавьте верхний отступ 15px и нижний отступ 25px к элементу .card.

CSS

.card {
  background-color: #f1f1f1;
  border: 1px solid #ddd;
  input1: 15px;
  input2: 25px;
  padding-left: 10px;
  padding-right: 10px;
}

                     .card {
  background-color: #f1f1f1;
  border: 1px solid #ddd;
  input1: 15px;
  input2: 25px;
  padding-left: 10px;
  padding-right: 10px;
}

HTML

<div class="card">
  <h3>Название товара</h3>
  <p>Описание товара. Очень хороший товар по выгодной цене.</p>
  <button>Купить</button>
</div>

Для задания отступов для отдельных сторон используйте свойства padding-top и padding-bottom. Синтаксис: padding-top: значение; padding-bottom: значение;

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сокращенная запись padding

Используйте сокращенную запись свойства padding для элемента .notification. Нужно задать верхний и нижний отступ 10px, а левый и правый - 20px.

CSS

.notification {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  input1;
  color: #721c24;
}

                     .notification {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  input1;
  color: #721c24;
}

HTML

<div class="notification">
  <p>Внимание! Это важное уведомление.</p>
</div>

Сокращенная запись padding с двумя значениями работает по принципу: первое значение - для верхнего и нижнего отступа, второе - для левого и правого. Синтаксис: padding: [top/bottom] [left/right];

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Задание отступов для всех четырех сторон

Элементу .custom-button нужно задать разные отступы для каждой стороны. Используйте сокращенную запись padding со всеми четырьмя значениями: верхний - 8px, правый - 25px, нижний - 8px, левый - 25px.

CSS

.custom-button {
  input1;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
}

                     .custom-button {
  input1;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
}

HTML

<button class="custom-button">Нажми меня</button>

Сокращенная запись padding с четырьмя значениями задает отступы в порядке: верхний, правый, нижний, левый (по часовой стрелке). Синтаксис: padding: [top] [right] [bottom] [left];

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Упрощение записи с одинаковыми значениями

У нас есть кнопка с отступами 8px сверху, 25px справа, 8px снизу и 25px слева. Перепишите сокращенную запись padding, используя всего два значения, поскольку верхний и нижний отступы одинаковы, а левый и правый тоже одинаковы между собой.

CSS

.button {
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 25px 8px 25px;
  /* Перепишите сокращенную запись padding, используя всего два значения */
  input1;
}

                     .button {
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 25px 8px 25px;
  /* Перепишите сокращенную запись padding, используя всего два значения */
  input1;
}

HTML

<button class="button">Отправить</button>

Когда верхний и нижний отступы одинаковы, а левый и правый тоже одинаковы, можно использовать сокращенную запись с двумя значениями: padding: [top/bottom] [right/left];

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Padding и размер элемента

У нас есть элемент .container с фиксированной шириной 300px. Добавьте внутренний отступ 20px со всех сторон, но так, чтобы общая ширина элемента осталась 300px (включая padding).

CSS

.container {
  width: 300px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 20px;
  input1;
}

                     .container {
  width: 300px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 20px;
  input1;
}

HTML

<div class="container">
  <p>Этот контейнер должен иметь общую ширину 300px, включая padding.</p>
</div>

По умолчанию, padding увеличивает общий размер элемента. Чтобы сохранить указанную ширину с учетом padding, используйте свойство box-sizing: border-box;

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Padding для изображений

Создайте фоторамку для изображения, используя padding и фон. Изображение должно иметь отступ от края 15px со всех сторон.

CSS

.image-frame {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  input1;
  display: inline-block;
}

.image-frame img {
  display: block;
  max-width: 100%;
}

                     .image-frame {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  input1;
  display: inline-block;
}

.image-frame img {
  display: block;
  max-width: 100%;
}

HTML

<div class="image-frame">
  <img src="https://naytikurs.ru/img/1.png" alt="Изображение">
</div>

Вы можете создать эффект рамки, поместив изображение в контейнер с padding и фоновым цветом. Используйте свойство padding без указания сторон, чтобы создать равномерный отступ вокруг изображения.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Разные отступы для текстовых элементов

В этом задании вам нужно стилизовать абзацы внутри .article разными внутренними отступами. Для заголовка h2 нужен отступ снизу 10px, для абзацев p - отступ 15px со всех сторон, а для цитаты blockquote - отступ слева 20px.

CSS

.article h2 {
  input1: 10px;
  border-bottom: 1px solid #eee;
}

.article p {
  input2: 15px;
  background-color: #f9f9f9;
}

.article blockquote {
  input3: 20px;
  border-left: 3px solid #ccc;
  font-style: italic;
}

                     .article h2 {
  input1: 10px;
  border-bottom: 1px solid #eee;
}

.article p {
  input2: 15px;
  background-color: #f9f9f9;
}

.article blockquote {
  input3: 20px;
  border-left: 3px solid #ccc;
  font-style: italic;
}

HTML

<div class="article">
  <h2>Заголовок статьи</h2>
  <p>Это первый абзац статьи. Он содержит какой-то текст для примера.</p>
  <blockquote>Это цитата в статье. Она должна иметь отступ слева.</blockquote>
  <p>Это заключительный абзац статьи.</p>
</div>

Используйте разные свойства padding для каждого типа элемента. Для h2 используйте padding-bottom, для p - padding, а для blockquote - padding-left.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинирование padding с другими свойствами блочной модели

Создайте карточку продукта с внутренними и внешними отступами. Карточка уже имеет внешний отступ (margin) и рамку (border). Вам нужно добавить внутренний отступ 20px со всех сторон.

CSS

.product-card {
  background-color: white;
  margin: 15px;
  border: 1px solid #ddd;
  input1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

                     .product-card {
  background-color: white;
  margin: 15px;
  border: 1px solid #ddd;
  input1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

HTML

<div class="product-card">
  <h3>Смартфон XYZ</h3>
  <p>Мощный смартфон с отличной камерой и долгим временем работы.</p>
  <p class="price">$499</p>
</div>

Для создания полноценной карточки важно комбинировать свойства margin, border и padding. В данном случае нужно добавить padding, чтобы отделить содержимое от границы.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Внутренние отступы в навигационном меню

Создайте горизонтальное навигационное меню, где каждый пункт имеет внутренние отступы 10px сверху и снизу, 15px слева и справа.

CSS

nav ul {
  list-style: none;
  background-color: #343a40;
  padding: 0;
  margin: 0;
  display: flex;
}

nav li {
  margin: 0;
}

nav a {
  input1;
  color: white;
  text-decoration: none;
  display: block;
}

                     nav ul {
  list-style: none;
  background-color: #343a40;
  padding: 0;
  margin: 0;
  display: flex;
}

nav li {
  margin: 0;
}

nav a {
  input1;
  color: white;
  text-decoration: none;
  display: block;
}

HTML

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Для пунктов навигационного меню можно использовать сокращенную запись padding с двумя значениями: первое для вертикальных отступов (сверху и снизу), второе для горизонтальных (слева и справа).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Внутренние отступы с процентными значениями

Создайте адаптивный контейнер с внутренними отступами, заданными в процентах. Добавьте отступ 5% со всех сторон, чтобы размер отступа изменялся пропорционально размеру элемента.

CSS

.responsive-container {
  background-color: #e9ecef;
  input1;
  max-width: 300px;
}

                     .responsive-container {
  background-color: #e9ecef;
  input1;
  max-width: 300px;
}

HTML

<div class="responsive-container">
  <h3>Адаптивный контейнер</h3>
  <p>Этот контейнер имеет внутренние отступы, заданные в процентах, что делает его адаптивным.</p>
</div>

Padding можно задавать не только в пикселях, но и в процентах. Процентные значения рассчитываются относительно ширины родительского элемента. Это удобно для создания адаптивных дизайнов.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку