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

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

WIDTH

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

Числовые значения, а также 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.

HEIGHT

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

Когда мы говорим о высоте 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 и имеют схожие значения, которые применяются так же, только к высоте.