CSS Макет - width и max-width

❮ Назад Далее ❯

CSS свойство width устанавливает фиксированную ширину элемента. CSS свойство max-width устанавливает максимальную ширину элемента.

CSS свойства width, max-width и margin:auto;

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

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

Элемент <div> имеет ширину 500 пикселей и поле установлено автоматически.

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

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

Элемент <div> элемент имеет максимальную ширину 500 пикселей и поле установлено автоматически.

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

Пример двух <div>:

div.ex1 {
   width: 500px;
   margin: auto;
   border: 3px solid #73AD21;
}

div.ex2 {
   max-width: 500px;
   margin: auto;
   border: 3px solid #73AD21;
}