css-свойство-padding

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

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

Как выглядит внутренний отступ

Padding — это свойство, отвечающее за пространство между содержимым элемента и ее рамкой. Однако, внутренние и внешние отступы бывают только у блочных элементов (абзац, заголовок, div).

Для наглядности, давайте возьмем обычное изображение, и поменяем ее внутренний отступ. Хотя тег img и является строчным элементом, мы можем отобразить ее как блочный при помощи следующей записи — display: block;.

Как вы наверное догадались, свойство display отвечает за отображение элементов. При помощи записи выше мы можем сделать любой элемент блочным. Далее, давайте придадим нашему изображению рамку и внутренний отступ равный 5 пикселям:

img {
border: 1px solid red;
padding: 5px; }

Вот как это выглядит на практике:

 

Книга-Тренды-веб-дизайна-small

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

Далее, давайте попробуем сделать внутренний отступ равный 15 пикселям:

img {
border: 1px solid red;
padding: 15px; }

Вот как это выглядит:

Книга-Тренды-веб-дизайна-small

Однако, мы можем менять не только общий отступ со всех сторон, но и с каждой по отдельности. Для подобных манипуляций существуют 4 свойства: padding-top (отступ сверху), padding-right (отступ справа), padding- bottom (отступ снизу) padding-left (отступ слева).

Например, давайте зададим отдельный отступ для всех сторон:

img {
padding-top: 5px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 17px; }

Вот как это выглядит на практике:

Книга-Тренды-веб-дизайна-small

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

Однако, чтобы не писать каждое свойство по отдельности, мы можем применить значения для всех сторон использовав только одной свойство — padding. При этом значения нужно перечислять через пробел по часовой стрелке (отступ сверху, справа, снизу, слева):

img {
padding: 5px 15px 25px 17px; }

Также если у нас значения сверху и снизу одинаковы, мы можем указать их лишь единожды. Например, представим что отступы сверху и снизу у нас должны быть по 5 пикселей, а по бокам — 7 и 9 пикселей. Тогда мы пишем следующее:

img {
padding: 5px 7px 9px; }

Таким же образом, представим что по бокам у нас — 5 пикселей, а сверху и снизу — 7 и 9 пикселей:

img {
padding: 7px 5px 9px; }

Далее, представим что у нас по бокам должно быть расстояние в 5 пикселей, а сверху и снизу — по 10 пикселей. Тогда мы пишем следующее:

img {
padding: 10px 5px; }

Как видите, все довольно-таки просто. Хочется отметить, что свойство padding используется для позиционирования и форматирования элементов.

А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так:

  1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
  2. Подписывайтесь на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Вы можете использовать следующие теги HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

9 − 7 =

Закрыть