135. Свойство padding для установки полей

Для установки полей вокруг содержимого элемента используется свойство padding. Полем является дистанция от внутреннего края рамки до контейнера, ограничивающего содержимое.

Можно задавать одно, два, три или четыре значения для свойства padding:

Код CSS

div {
    padding: 1px 2px 3px 4px;
    padding: 1px 2px 3px;
    padding: 1px 2px;
    padding: 1px;
    padding: auto;
    /* и другие */
}

Значения могут измеряться в любых единицах, которые поддерживаются CSS или в процентах. Число значений имеет следующий результат:

1 значение - поле задается со всех сторон одинаково;
2 значения - первое задает от верхнего и нижнего краёв, второе от левого и правого краёв;
3 значения - первое от верхнего, второе от левого и правого, третье от нижнего краёв;
4 значения - задает от всех краёв в следующей последовательности: верх, право, низ, лево.

Также существуют более конкретные аналоги: padding-top, padding-right, padding-bottom и padding-left. Например:

Код CSS

div {
    padding-top: 20px; /* Поле сверху 20 пикселей */
}
div {
    padding-left: 50%; /* Поле слева 50 процентов */
}

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

Свойство margin для установки отступовОтступы, рамки, поля

Свойство background для работы с фономЦвета и фон

Генераторы и оператор yield в PythonЗнакомство с Python

Свойство z-index для определения уровня элементаПозиционирование

Переменные, комментарии и типы данных в PHPКурс по PHP

Обработка исключений (try/except) в PythonЗнакомство с Python

Знакомимся с Flexbox в CSSЗнакомство с Flexbox

Условная инструкция if-elif-else в PythonЗнакомство с Python

Обнаружение сетевых служб с помощью NmapРазведка и сканирование

Предыдущий урок «134. Свойство margin для установки отступов» Следующий урок «136. Свойство border для создания границ»

HTML

CSS

Браузер

Вернуть расположение блоков

Код HTML

Код CSS

Браузер×

Задание

Восстановить код

Чтобы использовать все функции сайта (например: сохранение прогресса прохождения уроков, участие в рейтинге среди пользователей, прохождение тестов, просмотр внешних ссылок и скриншотов в некоторых курсах), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.

Сделайте поле со всех сторон при помощи padding размером 10px.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.

Необходимо авторизоваться, чтобы проверить задание
Это займет не больше минуты.