Какие 3 свойства влияют на размер ширины в CSS?

Question

На итоговую ширину элемента влияют:width — задаёт базовую ширину содержимого.padding — внутренние отступы (добавляются к width).border — толщина рамки (тоже увеличивает общую ширину).Если box-sizing: border-box — width включает padding и border.

YeaHub · Accepted Answer

1. Базовая ширина (width)Определяет ширину содержимого элемента.div {
  width: 200px; /* Ширина содержимого */
}2. Внутренние отступы (padding)Добавляются к width, увеличивая общий размер.div {
  width: 200px;
  padding: 20px; /* +40px к общей ширине (по 20px слева и справа) */
}
/* Итоговая ширина: 200px (content) + 40px (padding) = 240px */3. Рамка (border)Тоже увеличивает общую ширину.div {
  width: 200px;
  padding: 20px;
  border: 5px solid black; /* +10px к ширине (по 5px слева и справа) */
}
/* Итоговая ширина: 200 + 40 + 10 = 250px */Как box-sizing меняет расчёты?Если задать box-sizing: border-box, width будет включать padding и border:div {
  box-sizing: border-box;
  width: 200px; /* Теперь это общая ширина */
  padding: 20px; /* Входит в 200px */
  border: 5px solid black; /* Тоже входит в 200px */
  /* Ширина содержимого: 200 - 40 (padding) - 10 (border) = 150px */
}Что ещё может влиять на ширину?margin — внешние отступы (не входят в общую ширину, но занимают место на странице).min-width/max-width — ограничивают width.Итог:Без border-box: width + padding + border.С border-box: width включает всё.