Просмотров: 3 482

Свойство CSS min-width.

В продолжение заметки про свойство max-width, хочется рассмотреть свойство, которое является противоположным для него. Это свойство min-width.

Работает оно ровно наоборот.

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

Давайте рассмотрим пример:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<body>
<div style="background:#C30; width:90%; margin:auto; color:#fff;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque explicabo quis saepe consequatur quas officiis voluptas excepturi, id et mollitia ipsa eius dignissimos veritatis impedit possimus quo veniam placeat omnis!</p>
</div>
<div style="background:#060; width:90%; margin:auto; color:#fff; min-width:300px;">
<p>Блок со свойством min-width:300px. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque explicabo quis saepe consequatur quas officiis voluptas excepturi, id et mollitia ipsa eius dignissimos veritatis impedit possimus quo veniam placeat omnis!</p>
</div>
</body>
</html>

Вот видео-демонстрация того, как это работает.

Верхний блок продолжает сужаться, в то время как нижний блок со свойством min-width останавливается на определенной ширине.

Свойство min-width тоже очень полезно для мобильной верстки ваших сайтов и позволяет решить множество проблем.