«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


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

Но для блока с помощью свойств 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

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

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

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

CSS по шагам
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Все cвойства CSS
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта