Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
- Сделайте поле со всех сторон при помощи
paddingразмером10px.
Для установки полей вокруг содержимого элемента используется свойство padding. Полем является дистанция от внутреннего края рамки до контейнера, ограничивающего содержимое.
Можно задавать одно, два, три или четыре значения для свойства padding:
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. Например:
div {
padding-top: 20px; /* Поле сверху 20 пикселей */
}
div {
padding-left: 50%; /* Поле слева 50 процентов */
}Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.
