Какие CSS свойства влияют на размеры блочного элемента

Основные CSS-свойства, влияющие на размеры блочного элемента:

1. Ширина и высота:

   • width, min-width, max-width
   • height, min-height, max-height

2. Внутренние отступы:

   • padding (все стороны)
   • padding-top, padding-right и т.д.

3. Границы:

   • border-width или border-top-width и т.д.

4. Внешние отступы (не влияют на размер, но занимают место):

   • margin

5. Box-sizing (ключевое свойство):

   • box-sizing: content-box (по умолчанию) - размеры учитывают только контент
   • box-sizing: border-box - размеры включают padding и border

Пример:

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