Войти
s-lub » Учебники » CSS » Высота и ширина блоков (height и width)

Высота и ширина блоков (height и width)

Высота и ширина блоков (height и width)

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

Блоки могут строго определённых размеров или растягиваться согласно содержимого в них контента.

HEIGHT – данное свойство отвечает за высоту блока.

WIDTH - данное свойство отвечает за ширину блока.

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

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

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

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

Теперь давайте перейдём к практике:

Примеры:
.box1 {width: 300px;}- ширина блока будет 300 пикселей, а высота будет меняться согласно содержимого.

.box2 {height: 300px;} – высота будет 300 пикселей, а ширина будет меняться согласно содержимого.

.box3 {width: 300px; height: 600px;} – ширина 300, а высота 600 пикселей.

.box4 {width: 300px; max-height: 600px;} – ширина 300, а высота будет меняться в зависимости от содержания, но не будет превышать 600 пикселей.

.box5 {width: 300px; min-height: 600px;} – ширина 300, а высота будет меняться в зависимости от содержания, но всегда будет больше 600 пикселей.

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