Рамки и размеры

Пустые области вокруг элементов Вэб-страницы

Рамки

Поля

Обтекание текстом

Задание размеров

Для того, чтобы было легче понять о чем будет идти речь, можно представить, что каждый элемент Вэб-страницы заключен в невидимую прямоугольную область и окружен:

- полосами чистого пространства,

- рамкой,

- полями.

Пустые области вокруг элементов Вэб-страницы

Для задания пустых областей вокруг любого элемента служит свойство padding.

В качестве значений размера областей чистого пространства можно задавать величины, выраженные в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании размера при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.

Свойство padding задает размеры области, отделяющее содержимое от рамки.

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

Рамки

Свойство border позволяет облечь в рамку любой элемент Вэб-страницы.

Для задания толщины border-width рамки применяются константы thin(тонкая), medium(средняя), thick(толстая). В качестве значений размера можно задавать величины, выраженные в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании размера при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.

Задавая параметры рамки, надо определить стиль ее представления border-style - solid, double, groove, ridge, inset, outset, dotted, dashed.

Цвет рамки border-color может задаваться посредством наименования (red, yellow), шестнадцатеричным значением (#FF00AA), функцией RGB (25%,50%,0%), выражающей абсолютное или процентное содержание красной, зеленой и синей составляющих цвета.

Все вышеуказанные свойства можно детализировать для верхней (top), нижней (bottom), левой (left), правой (right) частей рамки.

Т.е.:

border-top, border-right, border-left, border-bottom.

Поля

Свойства margin-top, margin-bottom, margin-left, margin-right позволяют задавать размеры соответствующего поля для элемента Вэб-страницы.

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

В качестве значений размера полей можно задавать величины, выраженные в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании размера при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.

Задание отрицательной величины поля приводит к его сужению.