Внутренние отступы

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 34 из 76.

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

Вот базовый синтаксис для использования свойства padding:

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

padding-top: Внутренний отступ сверху элемента.
padding-right: Внутренний отступ справа элемента.
padding-bottom: Внутренний отступ снизу элемента.

padding-left: Внутренний отступ с левой стороны элемента.
value: Желаемое значение отступа, которое может быть указано в пикселях (px), ems (em), процентах (%) или других допустимых единицах измерения CSS.

Вы также можете использовать сокращенную запись для установки внутренних отступов для всех четырех сторон одновременно, например:

p {
    padding: 20px; /* Применяет одинаковый отступ ко всем четырем сторонам */
}

div {
    padding: 10px 25px; /* Устанавливает верхний и нижний отступы в 10px, а левый и правый — в 25px */
}

.button {
    padding: 15px 30px 10px 5px; /* Устанавливает отступ для каждой стороны индивидуально */
}

В этом примере все элементы <p> (абзац) имеют внутренний отступ (padding) 20px со всех сторон, все элементы <div> имеют верхний и нижний отступы 10px и левый и правый отступы 25px, а все элементы с классом button имеют верхний отступ 15px, правый отступ 30px, нижний отступ 10px и левый отступ 5px.

Задание

Легко

Вам дан HTML-документ с двумя заголовками. Ваша задача — использовать свойство padding, чтобы добавить отступы вокруг содержимого этих элементов. Выполните следующие шаги:

Напишите CSS-правило для элемента <h1>. Установите padding равным 20px со всех сторон.
Напишите CSS-правило для элемента <h2>. Установите верхний и нижний padding равным 10px, а левый и правый padding — 30px.

Шпаргалка

CSS padding создает пространство между содержимым элемента и его границей.

Индивидуальные свойства padding:

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

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

/* Одинаковый padding со всех сторон */
padding: 20px;

/* Сверху/снизу: 10px, Слева/справа: 25px */
padding: 10px 25px;

/* Сверху, Справа, Снизу, Слева по отдельности */
padding: 15px 30px 10px 5px;

Значения могут быть указаны в пикселях (px), em (em), процентах (%) или других допустимых единицах измерения CSS.

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

<html>
<head>
    <title>Padding</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">The Box Model</h1>
    <h2 style="border:2px solid black;">It helps in controlling spacing and layout in web design! </h2>
</body>
</html>