Рамки и размеры полей html страницы
Пустые области вокруг элементов Вэб-страницы
Для того, чтобы было легче понять о чем будет идти речь, можно представить, что каждый элемент Вэб-страницы заключен в невидимую прямоугольную область и окружен:
- полосами чистого пространства,
- рамкой,
- полями.
Пустые области вокруг элементов html-страницы
Для задания пустых областей вокруг любого элемента служит свойство 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.
Поля html-страницы
Свойства margin-top, margin-bottom, margin-left, margin-right позволяют задавать размеры соответствующего поля для элемента Вэб-страницы.
Поля дают возможность увеличивать размеры пустых областей, окружающих элемент. Поля (в отличие от пустых областей) расположены вне рамки, окружающей элемент.
В качестве значений размера полей можно задавать величины, выраженные в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании размера при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.
Задание отрицательной величины поля приводит к его сужению.
Обтекание текстом
Свойство float позволяет задать параметр обтекания текстом для любого элемента Вэб-страницы. Это свойство допускает два значения - left, right. Первое значение заставляет браузер помещать элемент слева от текста, а второе - справа.
Свойство float нельзя применить по отношению к элементам страницы, размещенными средствами абсолютного позиционирования.
Свойство clear со значениями left, right, both позволяет отменить действие механизма обтекания элементов страницы текстом. Так значение left указывает, что текст не должен уступать место элементам, определенным посредством стиля float:left. Функция both отменяет обтекание во всех случаях.
Задание размеров
Для задания высоты и ширины размеров любого элемента Вэб-страницы служат свойства height, width.
В качестве значений высоты и ширины можно задавать величины, выраженные в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании размера при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.
