Рамки, поля и отступы

• Рамки (border)
• Отступы (padding)
• Поля (margin)

Каждый элемент веб-страницы состоит из нескольких областей. Это область содержимого (например, текст, изображение и т.п.) и необязательное окружение - отступы, рамки и поля; размер каждой области определяется свойствами, описанными в этой главе. Если понятие содержимого очевидно, то остальные три области нужно четко различать.

• border - рамка элемента, может визуально отличаться от остальных областей (например, бывают пунктирные и двойные рамки).
• padding - внутренний отступ; расстояние между содержимым элемента и его рамкой.
• margin - поле элемента; расстояние между рамкой элемента и другими элементами веб-страницы.

Стиль фона различных областей элемента определяется так:

• Область содержимого: свойство 'background' элемента.
• Область внутренних отступов: свойство 'background' элемента.
• Область рамки: свойства рамки элемента.
• Область поля: поля всегда прозрачны.

Рамка элемента

Рамка элемента имеет три характеристики: толщину, тип и цвет. И определяется, соответственно, при помощи трех стилевых свойств border-width, border-style и border-color.

Толщина рамки

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

Толщина рамки может принимать одно из трех значений thin (тонкая), medium (средняя) или thick (толстая) или указываться в любых единицах измерения, кроме процентов.

h1 { border-width: thin } /* thin thin thin thin */
h1 { border-width: thin thick } /* thin thick thin thick */
h1 { border-width: thin thick medium } /* thin thick medium thick */

Тип рамки

• solid - сплошная
• double - двойная
• dashed - пунктирная
• dotted - точечная
• outset - выдавленная (приподнятое содержимое)
• inset - вдавленная (опущенное содержимое)
• ridge - бордюр (выпуклая рамка)
• groove - бороздка (вдавленная рамка)

Цвет рамки

Цвет рамки задается при помощи стилевого свойства border-color. Аналогично ширине и типу, в одном свойстве можно присваивать различные значения верхней, правой, нижней и левой частям рамки.

Слева нет рамки
 
p {
 border:4px double orange; 
 border-left:none; 
 }

Разные рамки
 
div { 
 border-top:1px solid #000000; 
 border-right:7px ridge rgb(255,0,0); 
 border-bottom:3px double orange; 
 border-left:10px dashed green;
 }

Отступы (padding)

Сокращённое свойство padding устанавливает размер отступа для всех четырёх сторон, а другие свойства padding-top, padding-right, padding-bottom, padding-left устанавливают соответствующие стороны.

h1 { 
 background: white; 
 padding: 1em 2em;
}

В данном стилевом правиле задан вертикальный отступ '1em' ('padding-top' и 'padding-bottom') и горизонтальный отступ '2em' ('padding-right' и 'padding-left'). Единицы измерения 'em' относительны к размеру шрифта элемента: '1em' эквивалентно размеру используемого шрифта.

Поля (margin)

Сокращённое свойство margin устанавливает размер поля для всех четырёх сторон, в то время как свойства margin-top, margin-right, margin-bottom, margin-left устанавливают только соответствующие стороны.

body { margin: 2em } /* все поля установлены в 2em */
body { margin: 1em 2em } /* верхнее и нижнее = 1em, правое и левое = 2em */
body { margin: 1em 2em 3em } /* верхнее=1em, правое=2em, нижнее=3em, левое=2em */

body {
 margin-top: 1em;
 margin-right: 2em;
 margin-bottom: 3em;
 margin-left: 2em; /* копируется из противоположной стороны (из правой) */
}