CSS Макет. Ширина - width и максимальная ширина - max-width

Курс по основам CSS. W3Schools на русском языке. Уроки для начинающих

---

Использование width, max-width и margin: auto;

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

Установка ширины width блочного элемента предотвратит его вытягивание до краёв контейнера. Затем вы можете установить поля автоматически (margin: auto;), чтобы горизонтально центрировать элемент внутри контейнера. Элемент займет указанную ширину, а оставшееся пространство будет разделено поровну между двумя полями:

Примечание: Проблема с <div> выше возникает, когда окно браузера меньше ширины элемента. Затем браузер добавляет на страницу горизонтальную полосу прокрутки.

Использование вместо этого max-width улучшит работу браузера с небольшими окнами. Это важно при создании сайта, пригодного для использования на небольших устройствах (т.е. для адаптивности):

Совет: Измените размер окна браузера до ширины менее 500 пикселей, чтобы увидеть разницу между двумя div-ами!

Вот пример двух div-ов выше:

---