Что изменится если на блоке убрать width: 100%?

Эффект удаления width: 100% из CSS блока

Это кажется простым вопросом, но ответ зависит от контекста. Давайте разберёмся подробно.

1. Поведение по умолчанию для блочных элементов

Блочные элементы (div, p, section и т.д.) по умолчанию занимают всю доступную ширину контейнера, даже без явного width: 100%.

<div class="container">
  <div class="block">Content</div>
</div>

<style>
  .container {
    width: 800px;
  }
  
  /* С width: 100% -->
  .block { width: 100%; }  /* Ширина = 800px -->
  
  /* Без width: 100% (по умолчанию) -->
  .block { }              /* Ширина = 800px (тоже!) -->
</style>

Так что в большинстве случаев разницы нет.

2. Когда width: 100% ВАЖЕН (строчные и встроенные элементы)

<div class="container">
  <button>Click me</button>
</div>

<style>
  .container {
    width: 300px;
  }
  
  /* Без width: 100% -->
  button { }              /* Только под содержимое, узкая -->
  
  /* С width: 100% -->
  button { width: 100%; }  /* Растягивается на всю ширину -->
</style>

Вывод: width: 100% нужен для inline и inline-block элементов (button, span, img), а также для флексов и гридов.

3. Проблемы с width: 100% + padding/margin

Это частая ошибка!

/* Плохо: box-sizing не учтён -->
.box {
  width: 100%;
  padding: 20px;       /* добавит 40px к ширине! -->
  /* Итого: 100% + 40px = выход за границы -->
}

/* Хорошо: используй box-sizing: border-box -->
.box {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;  /* padding теперь в рамках 100% -->
}

Визуально:

без box-sizing:
┌─────────────────────────────────┐ (контейнер 300px)
  ┌─────────────────────────────────┐ (box 100% + padding = overflow)
  │padding 20px│     content      │
  └─────────────────────────────────┘

с box-sizing: border-box:
┌─────────────────────────────────┐ (контейнер 300px)
┌─────────────────────────────────┐ (box 300px total)
│pad│        content          │pad│
└─────────────────────────────────┘

4. Width: 100% в гридах и флексах

/* Флекс контейнер -->
.flex-container {
  display: flex;
}

.flex-item {
  width: 100%;  /* относит к flex-container, не к окну -->
  /* Без этого flex-item только под содержимое -->
}

5. Width: 100% для инлайн-блочных элементов

<div class="container">
  <img src="image.jpg" alt="" />
</div>

<style>
  .container { width: 500px; }
  
  /* Без width: 100% -->
  img { }     /* Показывает оригинальный размер изображения -->
  
  /* С width: 100% -->
  img { width: 100%; }  /* Растягивается на всю ширину родителя -->
</style>

6. Когда width: 100% вредит

С margin/border добавляется к ширине

/* Плохо -->
.box {
  width: 100%;
  margin: 10px;        /* Добавит 20px (10+10) к ширине -->
  /* Итого: 100% + 20px -->
}

/* Хорошо -->
.box {
  width: 100%;
  box-sizing: border-box;  /* margin НЕ входит, её нужно учесть отдельно -->
  /* или -->
}

.box {
  width: calc(100% - 20px);  /* 100% минус margin -->
}

В контексте абсолютного позиционирования

/* Абсолютное позиционирование -->
.parent {
  position: relative;
}

.child {
  position: absolute;
  width: 100%;         /* = ширина родителя -->
  left: 20px;          /* + 20px смещение = выход за границы -->
}

/* Лучше -->
.child {
  position: absolute;
  left: 20px;
  right: 20px;         /* Аналогично width: 100% - 40px -->
}

7. Примеры: реальные сценарии

Кнопка в контейнере

<!-- HTML -->
<div class="button-container">
  <button>Submit</button>
</div>

<!-- Правильно -->
<style>
  .button-container { width: 300px; }
  button { width: 100%; }  /* Без этого кнопка узкая -->
</style>

Изображение в карточке

<!-- HTML -->
<div class="card">
  <img src="card-image.jpg" alt="" />
  <h2>Title</h2>
</div>

<!-- Правильно -->
<style>
  .card { width: 300px; }
  .card img {
    width: 100%;         /* Растянуть на всю ширину карточки -->
    height: auto;        /* Сохранить aspect ratio -->
    display: block;      /* Убрать inline spacing -->
  }
</style>

Модальное окно

/* Модальное окно с overlay -->
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;         /* Покрыть весь экран -->
  height: 100vh;       /* Покрыть всю высоту вьюпорта -->
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  width: 500px;        /* Fixed width, не 100% -->
  max-width: 100%;     /* Но не больше вьюпорта -->
  margin: 0 auto;      /* Центрировать -->
}

8. Современный подход: использовать max-width вместо width

/* Старый способ (может быть проблемы) -->
.box { width: 100%; }

/* Современный способ (более гибкий) -->
.box { max-width: 100%; }  /* Не более 100%, может быть меньше -->

/* Или с container query (новое) -->
.box {
  width: 100cqw;  /* 100% ширины контейнера -->
}

9. Сравнение: с width и без

<!-- Пример: список в контейнере -->
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

<style>
  .container { width: 800px; border: 1px solid black; }
  
  /* Вариант 1: БЕЗ width: 100% -->
  .item { }  /* По умолчанию блочный элемент займет 800px -->
  
  /* Вариант 2: С width: 100% -->
  .item { width: 100%; }  /* Явно указывает 800px -->
  
  /* Результат: одинаковый! -->
</style>

10. Практический совет

/* Reset для всех элементов (best practice) -->
* {
  box-sizing: border-box;  /* Всегда включай border-box -->
}

/* Больше не нужно беспокоиться о width: 100% + padding -->
.box {
  width: 100%;
  padding: 20px;  /* Работает как ожидается -->
}

Вывод

Если убрать width: 100%:

• Для блочных элементов (div, p, section): ничего не изменится, они займут всю ширину по умолчанию
• Для инлайн элементов (button, span, img): сожмутся до содержимого, нужно явно указывать width: 100%
• Для гридов и флексов: может потребоваться width: 100% в зависимости от ситуации

Главное правило: всегда используй box-sizing: border-box во всём проекте, чтобы избежать неожиданных проблем с шириной.