#Урок 7. Отступы, поля и рамка

И снова я рад приветствовать Вас на своем блоге и в сегодняшнем уроке хочу рассказать вам о неотъемлемой части CSS. После изучения данного урока вы сможете располагать элементы на web-странице, создавать между ними отступы, создавать эти элементы внутри отдельного блока, задавать им поля.

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

Единицы измерения — пиксель (px) и процент (%)

#block {

padding: 32px; /* отступ от границ определенного блока  со всех сторон до содержимого = 32 пикселя */

}

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

padding-top — создает поле сверху.
padding-right — создает поле справа.

padding-left — создает поле слева.
padding-bottom — создает поле снизу.

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

#block {   

padding: 15px 5px 15px 5px; /* сверху поле 15px, справа 5px, снизу 15px, слева 5px */

}
Чтобы создать поля например только слева и справа, то необходимо указать значения верх и низ - 0px.

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

Так же как и paddingmargin создает отступы со всех краев. А создание отступа с определенного края, делается следующим образом:

margin-top — отступ сверху.
margin-right — отступ справа.
margin-bottom — отступ снизу.
margin-left — отступ слева.

Так же как и у padding, для создания отступа с нескольких сторон, у margin есть такие же значения:

#block {   

margin: 15px 5px 15px 5px; /* сверху отступ 15px, справа 5px, снизу 15px, слева 5px */

}
Чтобы создать отступа например только слева и справа, то необходимо указать значения верх и низ - 0px.

border — свойство в CSS определяющее рамку вокруг элемента. Имеет 3 значения: цвет, толщина и тип рамки.

Синтаксис:

border: толщина; тип; цвет;

Есть возможность использовать и другой порядок значений свойства, но главное делать это через пробел.

Толщина рамки указывается в пикселях (px) и процентах (%).
Цвет задается в RGB формате (Red Green Blue) и в HTML HEX кода.

Как это выглядит в коде CSS:

#block {

border: 3px; solid; red; /* линия толщиной 3 px красного цвета */

Если есть необходимость установить 1, 2 или 3 рамки с определенной стороны, то указывать их нужно так:

border-top — рамка сверху;
border-bottom — рамка снизу;
border-left — рамка слева;
border-right — рамка справа;

Если  необходимо убрать рамки у элемента:

#block {
  border: none; /* у элемента с классом block не будет рамки */
}

outline — это свойство предназначенное для установки внешней рамки элемента.

Отличается от border тем, что  линия, которая задается в outline не влияет на положение блока, его ширину и высоту; в outline нельзя указать рамку только с определенной стороны.

На этом наш очередной урок окончен! Двигаемся дальше!

Комментарии закрыты.