CSS Width: Define and Control Element Width in CSS

CSS свойство width задает ширину элемента в единицах измерения, указанных в значении свойства. Ширина может быть задана в пикселях, процентах, em, rem и других единицах измерения.

Пример задания ширины в пикселях:

div {
  width: 300px;
}

Это задаст ширину блоку div в 300 пикселях.

Пример задания ширины в процентах:

div {
  width: 50%;
}

Это задаст ширину блоку div в половину ширины его родительского элемента.

Пример задания ширины с использованием em:

div {
  width: 20em;
}

Это задаст ширину блоку div в 20 размеров шрифта (font-size) его родительского элемента.

Еще один пример задания ширины с помощью свойства calc:

div {
  width: calc(100% - 20px);
}

Это задаст ширину блоку div в 100% ширины его родительского элемента минус 20 пикселей.

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

div {
  min-width: 200px;
  max-width: 600px;
}

Это задаст блоку div минимальную ширину в 200 пикселей и максимальную ширину в 600 пикселей.

В целом, свойство width позволяет задавать ширину элементов и оперировать с ней в зависимости от контекста. Примеры кода выше помогут понять основные принципы использования этого свойства.