Решение проблемы 100% ширины элемента с паддингом в CSS

Быстрый ответ

Для того чтобы задать элементу ширину равную 100% с вычетом отступов, используйте свойство box-sizing: border-box; в паре с функцией calc() в CSS:

.element {
  box-sizing: border-box;
  width: calc(100% – 30px); /* 2 отступа по 15px */
  padding: 15px;
}

Со включением box-sizing: border-box; паддинги будут входить в общую ширину элемента, а calc(100% – 30px) даст возможность вычета итогового размера отступов. Стоимость отступов можно корректировать по желанию.

Подробности box-sizing и padding

Свойство box-sizing отвечает за расчет ширины элемента. Часто используемое значение content-box не принимает в расчет padding и border, в отличие от box-sizing: border-box;, где они включены в общий объем.

Присвоение свойства box-sizing: border-box; элементу обеспечит, чтобы указанная ширина width: 100%; учитывала паддинги и рамки, это предотвращает выход элемента за границы родительского блока.

Работа со старыми браузерами: IE7 и ниже

Для поддержки Internet Explorer 7 и более ранних версий требуется использование условных стилей, JavaScript или оберток элементов.

Адаптивные отступы в процентах

Ещё один вариант для создания динамического отступа без использования calc() — это применение процентов:

.element {
  box-sizing: border-box;
  width: 100%;
  padding: 5%; /* Отступ также выразим в процентах */
}

Обратите внимание, что процентный отступ рассчитывается от ширины контейнера, что может привести к неожиданным результатам.

Техника отрицательных отступов

Отрицательные margin могут компенсировать паддинги и эффективно менять размер элемента:

.element {
  margin-left: -15px;
  margin-right: -15px;
}

Этот подход удобен, когда применение box-sizing не желательно ввиду определенных обстоятельств.

Flexbox и Grid: новейшие инструменты верстки

Flexbox и Grid предлагают современные и эффективные методы управления пространством между элементами:

.container {
  display: flex;
  gap: 30px;
}

.child {
  flex: 1;
}

В адаптивном дизайне свойства, такие как flex-grow, обеспечивают гибкий контроль над зазорами, снижая необходимость точных расчетов.

Полезные материалы

1. Введение в основную модель CSS-box (MDN) — значимость влияния отступов на ширину элементов.
2. Функция calc() (MDN) — ознакомление с возможностями функции calc().
3. Свойство box-sizing (MDN) — понимание назначения свойства border-box и его влияния на модель бокса.
4. Box Sizing (CSS-Tricks) — освоение работы с box-sizing.
5. Примеры применения calc() (CSS-Tricks) — практические примеры использования calc().
6. Различия между margin и padding (Stack Overflow) – отличия между внешним и внутренним отступами.
7. Полное руководство по Flexbox (CSS-Tricks) — применение Flexbox для более качественного контроля над макетом.
8. Поддержка gap в Flexbox браузерами — информация о свойстве gap.