Вертикальное выравнивание

vertical-align:baseline|middle|sub|super|text-top|text-bottom|top|bottom

• baseline - по базовой линии строки или нижней границе объемлющего блока,

• middle - по базовой линии объемлющего блока плюс половина высоты его,

• sub - нижний индекс,

• super - верхний индекс,

• text-top - верхушка элемента выравнивается по верхушке шрифта родительского элемента,

• text-bottom - низ элемента выравнивается по низу шрифта родительского элемента,

• top - верх элемента выравнивается по верху строки,

• bottom - низ элемента выравнивается по низу строки.

Отображение элементов

Таблица 2.10. Свойства управления отображением содержимого элемента
Свойство	Описание	Умолчание	Применение
overflow	Наложение	visible	К блочным или замещаемым элементам
clip	Область отображения	auto	К блочным или замещаемым элементам
visibility	Отображение	inherit	Ко всем элементам

Вид наложения

overflow:visible|hidden|scroll|auto

• visible - содержание не обрезается, а может отображаться и вне границ,

• hidden - содержание обрезается по границам, прокрутка не предусмотрена,

• scroll - содержание обрезается по границам, предусмотрен механизм прокрутки,

• auto - обработка определяется браузером.

Область отображения

clip:shape|auto

• auto - область отображения имеет тот же размер и те же границы, что и сам элемент,

• shape - форма области отображения - прямоугольник rect (верх, право, низ, лево), для которого задаются смещения относительно границ элемента. Отрицательные смещения обеспечивают отображение вне границ элемента.

Способ отображения

visibility:visible|hidden|collapse

• visible - область отображения видима,

• hidden - часть области отображения, выходящая за границы, не видима (прозрачна),

• collapse - часть области отображения, выходящая за границы, скрыта.

<IMG id="Носорог" src="../Images/Носорог.gif" width="148" height="125" style="visibility:visible"> <INPUT onClick="if (this.value=='Скрыть') {Носорог.style.visibility='hidden' this.value='Показать'} else {Носорог.style.visibility='visible' this.value='Скрыть'}" type="button" value="Скрыть">

Границы, отступы, поля

При оформлении документов для каждого из его элементов можно указать границы, отступы и поля. Соответствующие свойства применимы ко всем элементам.

top
left	margin-top margin-left border-top border-left padding-top padding-left content padding-right padding-bottom border-right border-bottom margin-right margin-bottom	right
bottom

Таблица 2.11. Свойства оформления документов
Свойство	Описание	Умолчание
margin/padding[-top/right/bottom/left]	Поле, отступ верхний, правый, нижний, левый	0
border[-top/right/bottom/left]-width	Толщина верхней, правой, нижней, левой границы	medium
border[-top/right/bottom/left]-color	Цвет верхней, правой, нижней, левой границы	Значение свойства color
border[-top/right/bottom/left]-style	Тип верхней, правой, нижней, левой границы	none

Поле

margin:Sv|Pv|auto

Отступ

padding:Sv|Pv|auto

Значения полей, равно как и отступов, можно задать как персонально, например: <ДЕСКРИПТОР style="margin-left:20px; padding-top:15px"> так и одной строкой <ДЕСКРИПТОР style="margin:10mm 5mm 10mm 20mm"> в порядке следования: верх, право, низ и лево.

Толщина границы

border-width:Rv>0|thin|medium|thick

• thin - тонкая,

• medium - средняя,

• thick - толстая.

Тип границы

border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset

• none - линия отсутствует,

• hidden - скрытая линия,

• dotted - пунктирная линия,

• dashed - штриховая линия,

• solid - обычная линия,

• double - двойная обычная линия с интервалом между линиями,

• groove - углубленная линия,

• ridge - выпуклая линия,

• inset - утопленная линия,

• outset - выпуклая линия.

Свойства границ можно объединять, задавая сразу все нужные величины: толщину, тип и цвет. Например: h1 {border-bottom: thick solid red}