Что влияет на ширину элемента

Ширина элемента определяется несколькими факторами:

1. Явно заданная ширина через CSS свойства:

   • width
   • min-width, max-width
   • box-sizing (влияет на расчет ширины с учетом padding/border или без)

2. Родительский контейнер:

   • Ширина блочных элементов по умолчанию занимает 100% ширины родителя
   • Для flex/grid детей ширина зависит от контейнера и свойств flex/grid

3. Контент:

   • Для inline/inline-block элементов ширина определяется содержимым
   • Для текста влияют свойства white-space, word-break

4. Окружение:

   • Плавающие элементы (float)
   • Позиционирование (position: absolute/fixed)
   • Внешние отступы (margin)

Пример:

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid;
  box-sizing: border-box; /* реальная ширина останется 300px */
}