Что изменится если не поставить на блочном элементе width: 100%?

Краткий ответ

Если не поставить width: 100% на блочном элементе в обычном потоке документа, его ширина останется 100% по умолчанию. Разница возникает при изменении контекста форматирования или использовании определенных свойств. Блочные элементы по умолчанию занимают всю доступную ширину своего родительского контейнера.

Подробное объяснение поведения блочных элементов

Стандартное поведение (без указания width)

По спецификации CSS, блочные элементы (например, <div>, <p>, <section>) имеют следующие характеристики по умолчанию:

display: block;
width: auto; /* Неявное значение */
position: static; /* Если не изменено */

При width: auto элемент:

1. Занимает всю доступную ширину родительского контейнера
2. Учитывает padding, border и margin в расчетах
3. Автоматически адаптируется к изменениям размера контейнера

Когда возникает разница: ключевые сценарии

1. Контекст Flexbox

В flex-контейнере блочные элементы теряют свое стандартное поведение:

.container {
  display: flex;
}

/* Без width: 100% */
.child {
  /* Ширина будет определяться содержимым (width: auto) */
}

/* С width: 100% */
.child-full {
  width: 100%; /* Займет всю ширину flex-контейнера */
}

2. Контекст Grid

Аналогично flexbox, в grid-контейнере:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.child {
  /* Без width: 100% - ширина определяется ячейкой grid */
  /* С width: 100% - может переопределить поведение */
}

3. Плавающие элементы (float)

.float-container {
  width: 300px;
}

.float-child {
  float: left;
  /* Без width: 100% - схлопнется до ширины содержимого */
  /* С width: 100% - займет всю ширину контейнера */
}

4. Абсолютное позиционирование

.relative-parent {
  position: relative;
  width: 500px;
}

.absolute-child {
  position: absolute;
  /* Без width: 100% - ширина по содержимому */
  /* С width: 100% - растянется на всю ширину родителя */
}

Практические примеры различий

Пример 1: Боксовая модель

.box {
  padding: 20px;
  border: 5px solid #333;
  margin: 10px;
  /* width не указан - по умолчанию auto */
}

/* Фактическая ширина = ширина родителя - (padding + border + margin) */
/* С width: 100% элемент выйдет за границы родителя из-за паддингов и бордеров */

Пример 2: Респонсив дизайн

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.content {
  /* Без width: 100% - автоматически адаптируется к container */
  /* С width: 100% - всегда 100% от ближайшего позиционированного предка */
}

Когда явно указывать width: 100%?

1. Внутри flex/grid контейнеров для заполнения доступного пространства
2. Для элементов с position: absolute чтобы привязаться к ширине родителя
3. При работе с float для контроля ширины
4. Для заменяемых элементов (iframe, img) чтобы управлять их размерами
5. При анимациях и трансформациях для предсказуемого поведения

Потенциальные проблемы с width: 100%

.problem-case {
  width: 100%;
  padding: 20px;
  border: 2px solid black;
  /* Элемент выйдет за границы родителя на 44px (20px*2 + 2px*2) */
}

/* Решение: использовать box-sizing */
.correct-case {
  width: 100%;
  padding: 20px;
  border: 2px solid black;
  box-sizing: border-box; /* padding и border включаются в width */
}

Выводы

• В обычном потоке width: 100% избыточен для блочных элементов
• В современных layout-моделях (flex, grid) поведение меняется
• Ключевое различие проявляется при изменении контекста форматирования
• Важнее понимать концепцию width: auto и боксовую модель
• Всегда учитывайте box-sizing при работе с процентными ширинами

Правильное понимание этих нюансов критически важно для создания предсказуемых, адаптивных интерфейсов и предотвращения распространенных ошибок в верстке.