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

В этой статье проведен обзор таких CSS свойств как width и height, которые позволяют задавать ширину и высоту блочным элементам. Рассмотрено свойство overflow, которое определяет видимость контента внутри блоков с фиксированными размерами, а также возможность установить минимальные и максимальные значения ширины и высоты для блочных элементов html документа.

CSS свойство width – ширина 

Ширина элемента html документа задается свойством width, значением которого, могут быть любые единицы измерения, рассмотренные нами в предыдущей статье по курсу CSS.

Для примера зададим фиксированную ширину для блока с идентификатором content, html код которого выглядит так:

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

Итак, наш CSS код имеет вид:

Результат работы кода на скриншоте:

CSS свойство height – высота

Аналогичным образом можно задать фиксированную высоту блочного элемента, для этого применяется CSS свойство height, значением которого, могут являться любые единицы измерения.

Добавим к нашему примеру выше фиксированное значение высоты и посмотрим, что изменится после наших действий.

Например:

Довольно интересную картину, мы наблюдаем на скриншоте ниже:

Содержимое блока вышло за пределы заданной нами фиксированной ширины, так как оно просто не помещается в установленные нами размеры.

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

CSS свойство overflow

Свойство overflow управляет отображением содержания блочного элемента, если оно не помещается в заданные размеры и выходит за его пределы, как в нашем с вами случае.

У данного CSS свойства есть несколько значений:

-visible – отображает все содержимое, даже если оно выходит за пределы заданных размеров. Данное значение установлено по умолчанию;

-hidden – все, что выходит за пределы заданных размеров блока, будет скрыто;

-scroll – принудительно добавляет полосы прокрутки к блочному элементу, даже если контент внутри него не выходит за пределы заданных значений.

-auto – полосы прокрутки будут добавлены, но только в случае необходимости;

-inherit – наследует значение родителя.

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

А результат работы такого кода, можно посмотреть ниже:

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

Минимальное и максимальное значение ширины и высоты в CSS

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

Минимальные и максимальные размеры блока

Установить пределы ширины можно с помощью свойств:

-min— width – задает минимальную ширину блока;

-max— width – задает максимальную ширину блока.

Аналогично можно установить пределы высоты блока, с помощью CSS свойств:

-min— height – минимальная высота блока;

-max— height – максимальная высота блока.

Изменим CSS код ля нашего примера выше, таким образом, чтобы полоса прокрутки исчезла.

Например:

В результате высота нашего блока стала немного больше. И необходимость в полосе прокрутки пропала, что видно из скриншота.

На этом я заканчиваю свой обзор. Это была довольно познавательная статья, в которой мы научились не только задавать фиксированные размеры ширины и высоты блочных элементов, с помощью CSS свойств width и height, но также и манипулировать отображением содержания блока, используя свойство overflow.

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