Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная Свойства CSS CSS по шагам Высота и ширина блоков Позиционирование. Слои

Высота и ширина блоков в CSS

Height Max-height Max-width Min-height Min-width Width


Значения свойств
Применение свойств


По умолчанию размер блока автоматически подстраивается под размеры его содержимого: чем больше пространство, занимаемое содержимым, тем выше и шире становится блок.

Но для блока с помощью свойств height и width можно задать фиксированную высоту и ширину.

А также можно задать максимальную высоту и ширину блока с помощью свойств max-height и max-width и минимальную высоту и ширину блока при помощи свойств min-height и min-width соответственно.

Свойства max-height, max-width, min-height и min-width не поддерживаются Internet Explorer до версии 8.0.

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

Значения свойств

Значения для всех вышеперечисленных свойств высоты и ширины задаются в единицах, принятых в CSS (подробнее здесь...), либо:

- для свойств height и width значение можно указать в % относительно размеров родительского элемента или окна браузера; при значении auto высота или ширина блока автоматически подстраиваются под содержимое (значение по умолчанию).

- для свойств max-height, max-width, min-height и min-width при значении none отменяются все ограничения на высоту или ширину (значение по умолчанию).

Применение свойств

Свойства height, width, max-height, max-width, min-height и min-width применимы к блочным элементам и к тегу <img>.

Размеры, установленные при помощи свойств height, width и max-width фиксированы. И в том случае, если содержимое блока превысит заданные размеры, то какая-то часть контента окажется за пределами блока. В этом случае можно воспользоваться свойством overflow со значением auto - добавляется полоса прокрутки.

Минимальная высота min-height также фиксирована, если высота содержимого ее не превышает. Но с ростом высоты контента, превосходящей min-height, растет и значение высоты.

При задании высоты блока при помощи свойства max-height, его высота будет расти пропорционально увеличению размера содержимого до значения max-height. Если же высота содержимого превысит max-height, то какая-то его часть окажется за пределами блока. Здесь опять же можно воспользоваться свойством overflow со значением auto.

И наконец, при задании минимальной ширины блока min-width он будет занимать всю ширину свободного пространства. При этом, с уменьшением ширины окна браузера, будет уменьшаться и ширина блока, но до значения min-width. Далее сужение блока прекращается, а при дальнейшем уменьшении ширины окна браузера, у него появляется горизонтальная полоса прокрутки.

Пример

Фрагмент кода:

<p style="border:#FF0000 solid 2px; max-height:100px; width:150px;">
<img src=
"img/peng_64.gif" height="64" width="64">
</p>

<p style="border:#FF0000 solid 2px; max-height:100px; width:150px;">
<img src=
"img/peng_128.gif" height="128" width="128">
</p>

Результат:


Высота и ширина блоков в CSS

Высота и ширина блоков в CSS


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

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

Границы в CSS Высота и ширина блоков Позиционирование. Слои
CSS по шагам
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru