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

Используйте width, max-width и margin: auto;

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

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

Ширина этого элемента <div> составляет 500px, отступы установлены в auto.

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

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

Максимальная ширина этого <div> элемента составляет 500px, а отступы установлены в auto.

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

Вот пример для двух div, которые находятся выше:

Пример

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

Попробуйте сами