Как установить ширину контентной области в CSS

Чтобы установить ширину контентной области в CSS, обычно используют свойство width. Например, чтобы задать фиксированную ширину в 800 пикселей для контентной области, можно написать следующий CSS код:

.container {
  width: 800px;
}

Здесь мы задали ширину контейнеру с классом .container равной 800 пикселей. Важно помнить, что указанный размер будет установлен только для самого контейнера, а его содержимое может выходить за пределы заданной ширины.

Чтобы избежать этого, можно добавить свойство box-sizing со значением border-box. Это свойство позволяет указать размер элемента, включающий в себя размеры границы (border), внутреннего (padding) и внешнего (margin) отступов. Таким образом, размер содержимого будет уменьшен, чтобы оно уместилось в указанной области.

Вот пример использования свойства box-sizing:

.container {
  width: 800px;
  box-sizing: border-box;
}

В этом примере мы добавили свойство box-sizing: border-box, что позволяет контенту умещаться в указанной области.

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

.container {
  max-width: 1200px;
  min-width: 300px;
}

В этом примере мы установили максимальную ширину контейнера равной 1200 пикселей и минимальную ширину 300 пикселей, что позволит контенту подстраиваться под ширину экрана на любом устройстве.