css
Основы

Ширина и высота

CSS
Основы

Обновлено

14.09.2023

Просмотров

69

Время прочтения

40 мин.

Сложность

Как уже было сказано в предыдущих уроках, за ширину и высоту элемента отвечают свойства width и height. Сейчас же стоит вспомнить о калькуляции размеров элемента, которая определяется свойством box-sizing и может принимать две модели: при box-sizing: content-box свойства width и height будут отвечать только за ширину\высоту content части, при box-sizing: border-box свойства включают в себя также внутренний отступ и границу. О причинах, по которым в большинстве случаев разработчики используют box-sizing: border-box, уже было рассказано, поэтому вновь рассуждать мы об этом не будем. Настройтесь на использование именно этой модели калькуляции размеров элемента.

WIDTH

Определяет ширину текущего элемента.

width
Значение в px, pt, %, em, rem и др. величинах определяет ширину элемента. При указании % значение рассчитывается относительно ширины родительского элемента. Отрицательные значения не допускаются
auto значение по умолчанию. Строчные и блочно-строчные элементы принимают ширину контента при box-sizing: content-box и ширину контента, внутренних отступов и рамки при box-sizing: border-box. Блочные элементы растягивают контент-часть на всю доступную ширину
min-content ширина элемента становится минимально допустимой для отображения контента
max-content ширина элемента становится максимальной для отображения контента
fit-content ширина элемента становится соответствующей размеру контента
available (fill-available) элемент займёт доступную ему ширину родителя, но при этом будет учитывать размер собственных padding и border, даже при модели box-sizing: content-box. Элемент таким образом не выйдет за пределы content-части родителя
initial свойство принимает значение по умолчанию
inherit наследует значение от родителя
unset в случае с width будет установлено значение по умолчанию, то есть auto

Числовые значения, а также auto, initial, inherit и unset вам должны быть понятны, потому что с ними мы уже сталкивались и уже говорили о них. А вот min-content и пр. требуют разъяснений. При указании min-content элемент сжимается настолько, чтобы разместить внутри себя контент. Остальная часть, разумеется, занимается маржей. Так, если в вашем div с данным значением будет лишь текст, то элемент сожмётся до размеров самого длинного слова, которое нельзя перенести на другую строку. Обратите внимание на скриншот:

Элемент сжался по размерам самого длинного слова (оно подчёркнуто), другие слова перенеслись на новую строку, как это и положено (обязательно вспомните, как работают переносы слов в тексте в HTML). Если мы укажем перенос для длинного слова при помощи тега <wbr>, то элемент сожмётся ещё больше, до следующего самого длинного слова, и т.д. В случае, если внутри элемента будет изображение, элемент сожмётся до размеров этого изображения, разумеется, если оно будет больше самого длинного слова. Думаю, логика работы этого значения понятна.

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

Стоит сразу отметить, что, разумеется, работа данного значения перекрывается свойством max-width. Если вы установите max-width: 100%, то и max-content будет действовать только в пределах этого значения.

Fit-content сожмёт контент-часть элемента таким образом, чтобы она соответствовала размерам контента и дочерних элементов. В отличие от min-content элемент не будет сжимать своё текстовое содержимое, а позволит ему располагаться так, как следует: текст будет занимать всю строку и переноситься на новую, прочие элементы, такие как изображения, кнопки будут вести себя точно так же. Элемент с fit-content сам будет подстраиваться под них. При этом он не будет растягиваться на всю ширину родителя, а свободное пространство отдаст марже:

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

Значение available (в некоторых браузерах fill-available) является весьма необычным, используется оно предельно редко. Вы можете пропустить сейчас его изучение и вернуться к этому позже. Элемент занимает доступную ему ширину родителя, однако при этом будет учитывать размер собственных padding и border даже при модели box-sizing: content-box. Элемент таким образом не выйдет за пределы content-части родителя. Работа этого значения особенно хорошо видна при модели box-sizing: content-box.

Родительский элемент с классом parent имеет ширину контент-части 472px. Мы видим, что дочерний элемент с классом child, несмотря на модель box-sizing: content-box, на вышел за пределы родителя, и это произошло благодаря fill-available. То есть элемент рассчитал всё доступное пространство, вычел оттуда собственный паддинг и бордер, и оставшееся место определил под ширину собственного контента. Если мы укажем для дочернего элемента width: 100%, то он поведёт себя иначе — сделает свой контент шириной 472px и ещё добавит сюда свой паддинг и бордер, так что итоговая ширина его будет лишь немногим меньше родительской (напомним, ширина контент-части родителя всего 472px):

В случае, если бы мы имели дело с box-sizing: border-box, нам было бы достаточно и width: 100%, но в нашем случае fill-available может оказаться полезным. Данное значение используется редко и в целом вы можете не вникать сейчас в его работу, а вернуться к нему позже.

В справочнике MDN по свойству width вы найдёте также примеры с указанием двух значений, а также возможность указания значения fit-content с величиной в качестве аргумента:

                
width: 25em border-box; width: 75% content-box; width: fit-content(20em);

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

Помимо обычного свойства width, в CSS существуют свойства, определяющие минимальную и максимальную ширину элемента: min-width и max-width. Они «перекрывают» значение width, ограничивая минимальный и максимальный размер элемента. Чаще всего эти свойства понадобятся вам при работе с относительными единицами измерения. Например, мы хотим задать ширину элемента в 25% от ширины родителя, но чтобы при этом элемент был не меньше 300px. Простой и понятный способ сделать это — использование одновременно свойств width, min-width:

                
.card{ width: 25%; min-width: 300px; }

Так, при ширине родительского контейнера в 800 px наш элемент card должен был стать шириной 200px, но при указании минимальной ширины он не будет менее 300px. Аналогично можно ограничить и максимальный размер элемента:

                
.card{ width: 50%; max-width: 600px; }

Размер элемента будет 50% от родителя, но не более 600px.

min-width/max-width
Значение в px, pt, %, em, rem и др. величинах определяет минимальную\максимальную ширину элемента. При указании % значение рассчитывается относительно ширины родительского элемента. Отрицательные значения не допускаются. Для min-width значение по умолчанию — 0
none только для max-width. Значение по умолчанию. Означается отсутствие ограничения максимальной ширины
min-content минимальная\максимальная ширина элемента устанавливается как минимально необходимая для помещения контента элемента
max-content минимальная\максимальная ширина элемента устанавливается как максимально необходимая для помещения контента элемента
fit-content минимальная\максимальная ширина элемента устанавливается как соответствующая размеру контента
available (fill-available) минимальная\максимальная ширина элемента устанавливается как доступная ширина родителя, но при этом будет учтён размер собственных padding и border элемента (см. описание и скриншоты выше)
initial свойство принимает значение по умолчанию
inherit наследует значение от родителя
unset в случае с min-width будет установлено значение 0, для max-width значение none

HEIGHT

Определяет высоту текущего элемента.

height
Значение в px, pt, %, em, rem и др. величинах определяет высоту элемента. При указании % значение рассчитывается относительно высоты родительского элемента. Отрицательные значения не допускаются
auto значение по умолчанию. Браузер самостоятельно рассчитывает высоту элемента. Как правило это совокупная высота контента с учётом высоты строки
min-content высота элемента становится минимально допустимой для отображения контента (см. примечание ниже)
max-content высота элемента становится максимальной для отображения контента (см. примечание ниже)
fit-content высота контент-части элемента становится соответствующей размеру контента (см. примечание ниже)
available (fill-available) элемент займёт доступную ему высоту родителя, но при этом будет учитывать размер собственных padding и border, даже при модели box-sizing: content-box. Элемент таким образом не выйдет за пределы content-части родителя (см. примечание ниже)
initial свойство принимает значение по умолчанию
inherit наследует значение от родителя
unset в случае с height будет установлено значение по умолчанию, то есть auto

Когда мы говорим о высоте height в веб-разработке, мы должны сперва сказать, что в большинстве случаев разработчик не указывает определённую высоту элементов, а она рассчитывается автоматически исходя из количества и размера контента. Так принято потому, что довольно часто контент в нашей вёрстке имеет разное количество символов — например описание в карточке продукта может быть как в 100 слов, так и в 150, а вёрстка применяется одна. Высота карточки будет изменяться, поэтому указать определённую высоту, например 400px, мы не можем. Так же и изображение товара — оно может иногда отличаться, и это будет также добавлять высоту карточке. Поэтому чаще всего высота явно не указывается, а оставляется значение по умолчанию auto. Браузер сам рассчитывает высоту, учитывая бордер и паддинг элемента, его содержимое.

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

Значения высоты в px, rem, % и прочие, а также значения auto, inherit, initial, unset вам также должны быть понятны. А вот все прочие по-прежнему нуждаются в разъяснениях. Дело в том, что сами по себе в обычных обстоятельствах эти значения бесполезны. Высота у нас по умолчанию auto, т.е. в зависимости от количества текста и изображений она будет той или иной. Сжать текст по вертикали при помощи height: min-content, а также растянуть его по вертикали при помощи height: max-content мы не можем, потому что эти значения не изменят высоту строки текста или размер шрифта, а обрезать\перенести текст по вертикали невозможно. Также и с height: fit-content — это свойство бесполезно, потому что высота элемента и так оптимальная, не больше и не меньше, чем количество контента. Значение height: fill-available уже может нам пригодиться, т.к. оно работает со свободным пространством. В случае, если родитель будет высотой 200px, а дочерний элемент будет иметь лишь пару строк текста, данное значение растянет дочерний элемент по вертикали на всю высоту родителя.

Родитель имеет высоту 200px, а дочерний элемент изначально не имеет явной высоты, но имеет две строки текста. Когда мы указываем height: fill-available, это означает, что он должен растянуться на всё свободное место родителя.

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

На скриншоте мы изменили направление текста, так что теперь высота формируется исходя из количества контента и размера шрифта, а значит мы можем применить и значения min-content, max-content, fit-content. Как видно из примера, min-content перенёс короткие слова и сжал текст насколько это возможно, но теперь это повлияло на высоту. Аналогично будут работать и max-content (растянет элемент на максимум по высоте), и fit-content (выберет оптимальную высоту, чтобы не выходить за пределы родителя). Я думаю, посыл понятен, а вам следует в своём учебном html файле создать аналогичный параграф с текстом и указать для него вертикальное направление текста, а дальше поиграть со значениями min-content и пр., чтобы окончательно разобраться в их работе.

Также как и для width, для height присутствуют свойства min-height, max-height, отвечающие соответственно за минимальную и максимальную высоту. Они работают аналогично min-width, max-width и имеют схожие значения, которые применяются так же, только к высоте.

min-height/max-height
Значение в px, pt, %, em, rem и др. величинах определяет минимальную\максимальную высоту элемента. При указании % значение рассчитывается относительно ширины родительского элемента. Отрицательные значения не допускаются
auto только для min-height. Значение по умолчанию. Означает, что минимальная высота рассчитывается автоматически в зависимости от высоты контента
none только для max-height. Значение по умолчанию. Означается отсутствие ограничения максимальной высоты
min-content минимальная\максимальная высота элемента устанавливается как минимально необходимая для помещения контента элемента
max-content минимальная\максимальная высота элемента устанавливается как максимально необходимая для помещения контента элемента
fit-content минимальная\максимальная высота элемента устанавливается как соответствующая размеру контента
available (fill-available) минимальная\максимальная высота элемента устанавливается как доступная высота родителя, но при этом будет учтён размер собственных padding и border элемента (см. описание и скриншот про width)
initial свойство принимает значение по умолчанию
inherit наследует значение от родителя
unset в случае с min-height будет установлено значение auto, для max-height значение none

Необходимо очков: