Путаница в свойствах CSS

Если вы уже познали азы CSS и уверенно описываете таблицы стилей для сайтов начального и среднего уровней, то наверняка знаете о свойствах: width и height. Width задает ширину элемента, height - высоту. А если вы не знаете точных размеров блока, что тогда? Весь труд коту под хвост?

Как бы не так! CSS подготовлен для всех случаев жизни, даже для такой мелочи, где в главных ролях выступают свойства min-width, max-width, min-height и max-height. Поочередно разберем "волшебство" этих параметров.

min-width: задает не просто ширину блока, а минимальную ширину. Что это значит? Это значит, что блок может растягиваться сколько ему угодно, но не меньше этого значения. Например, если задано min-width: 40px, это значит, что ширина блока минимум может быть только 40 пикселей и не меньше.

max-width: задает максимальную ширину блока, до которой элемент больше не сможет растягиваться. Это свойство обратно свойству min-width.

min-height: определяет минимальную высоту блока. По смыслу это то же самое, что и min-width, только данное свойство работает для высоты.

max-height: ограничивает ширину блока до переданного ему параметра. Работает так же, как и max-width, только определяется оно для высоты.

Теперь я хочу объяснить, почему я описал эти свойства в данной статье.

Когда я был новичком в верстке, то в чужом коде очень часто применялись эти свойства, хотя я никак не находил смысл этих параметров, что-то вроде "слово знал, а толк его - нет". Но это еще не самое странное. Самым странным был тот факт, что во многих книгах, курсах, источниках и т.д. нигде не были описаны эти свойства. Приходилось мне разбираться в них по принципу "практика, практика и еще раз практика".

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

Будьте бдительны, товарищи!