Почему размеры блока больше заданных

При указании блоку свойств border или padding, блок становится больше заданных размеров. Используем свойство box-sizing: border-box для исправления такого поведения.

Подписаться на Telegram-канал блога

Если кратко, то просто добавляйте в начало основного css-файла следующие правила:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Абсолютно для всех элементов, включая все превдо-элементы :before и :after устанавливается свойство box-sizing: border-box;

Краткое объяснение

На изображении внизу видим разницу - верхний блок имеет по-умолчанию свойство box-sizing: content-box;, а нижнему блоку сами установили свойство box-sizing: border-box;

При box-sizing: content-box; ширина и высота задается контенту

При box-sizing: border-box; ширина и высота задается блоку

Объясню на этом же примере более развернуто.

Например, нужно сверстать блок шириной 400px с текстом, рамкой 10px и внутренним отступом текста от рамки 25px

Задаем HTML:

<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, ut itaque illo laudantium possimus incidunt veritatis hic ab, magnam nesciunt natus est nisi iste voluptatem aperiam. Ut nesciunt, voluptates earum aliquid ad culpa assumenda eum nemo. Recusandae eos neque, commodi ducimus molestiae ea quis velit laudantium asperiores, delectus quam fuga, et tempora illo dicta quia nisi? Quos possimus at ducimus eum, odio earum reiciendis distinctio ad consequuntur architecto provident soluta, ratione sapiente ex perferendis quas. Aspernatur reprehenderit earum ex iste aliquid facere, veniam accusantium repellendus delectus, eum in doloribus explicabo suscipit itaque odio soluta praesentium ipsa, commodi esse saepe cupiditate!</div>

Задаем стили:

.text {
  padding: 25px;
  width: 400px;
  border: 10px solid #f7cb15;
}

Без свойства box-sizing: border-box; получаем блок шириной большего размера(470px), чем была задана(400px).

Так как свойство box-sizing по-умолчанию имеет значение content-box заданная ширина применятся к контенту(а не к блоку), а потом к ширине контента 400px еще прибавляется padding по 25px слева и справа и ширина рамки по 10px слева и справа и итоговая ширина блока становится 400px(ширина контента) + 50px(padding слева и справа) + 20px(border слева и справа) = 470px

Если же свойству box-sizing поставить значение border-box, то указанная ширина будет применена к блоку(а не к контенту) с учетом размеров padding и border

В итоге мы контролируем внешние размеры блока независимо от установленных padding и border и на мой взгляд это логичней, потому что не придется постоянно высчитывать вручную итоговые размеры блока.

Еще один пример, когда верстка ломается без указания box-sizing: border-box

Предположим, нужно сверстать блок с преимуществами, где в ряд будут располагаться по 4 блока

Задаем структуру:

<div class="section">
  <div class="container">
    <div class="pluses">
      <div class="pluses__flex">
        <div class="pluses__item pluses-item">
          <div class="pluses-item__icon">₽</div>
          <div class="pluses-item__title">Plus 1</div>
          <div class="pluses-item__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eligendi at suscipit odit iusto, similique, ex aliquam itaque soluta repellat.</div>
        </div>
        <div class="pluses__item pluses-item">
          <div class="pluses-item__icon">!</div>
          <div class="pluses-item__title">Plus 2</div>
          <div class="pluses-item__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. repellat.</div>
        </div>
        <div class="pluses__item pluses-item">
          <div class="pluses-item__icon">$</div>
          <div class="pluses-item__title">Plus 3</div>
          <div class="pluses-item__text">Voluptate eligendi at suscipit odit iusto, similique, ex aliquam itaque soluta repellat.</div>
        </div>
        <div class="pluses__item pluses-item">
          <div class="pluses-item__icon">%</div>
          <div class="pluses-item__title">Plus 4</div>
          <div class="pluses-item__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eligendi at suscipit odit iusto, similique, ex aliquam itaque soluta repellat.</div>
        </div>
        <div class="pluses__item pluses-item">
          <div class="pluses-item__icon">#</div>
          <div class="pluses-item__title">Plus 5</div>
          <div class="pluses-item__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eligendi at suscipit odit iusto,</div>
        </div>
        <div class="pluses__item pluses-item">
          <div class="pluses-item__icon">@</div>
          <div class="pluses-item__title">Plus 6</div>
          <div class="pluses-item__text">Voluptate eligendi at suscipit odit iusto, similique, ex aliquam itaque soluta repellat.</div>
        </div>
      </div>
    </div>
  </div>
</div>

Задаем стили:

.pluses {
  background: #f6f6f6;
  border-radius: 10px;
  padding: 30px 0;
}
.pluses__flex {
  display: flex;
  flex-wrap: wrap;
}
.pluses-item {
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}
.pluses-item__icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #f7cb15;
  display: block;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  color: #f7cb15;
  font-size: 24px;
}
.pluses-item__title {
  font-weight: bold;
  text-align: center;
  font-size: 24px;
  margin-bottom: 15px;
}
.pluses-item__text {
  font-size: 16px;
  text-align: center;
}

Для блока .pluses-item задаем ширину 25% и расчитываем получить по 4 блока в ряд, но при отсутствии box-sizing: border-box; получаем следующий результат:

Ширина в 25% задается контенту и добавляется еще padding, поэтому ширина блока получается 25% + padding-left + padding-right и в родительский блок .pluses__flex по 4 блока уже не помещается

Поэтому всегда использую box-sizing: border-box; для абсолютно всех элементов

В Bootstrap Reboot box-sizing: border-box; для всех элементов добавлено по-умолчанию, поэтому при верстке с нуля всегда использую Bootstrap Reboot - можно почитать статью Сброс CSS стилей Bootstrap Reboot

Также по этой теме можно почитать на https://learn.javascript.ru/box-sizing

Поддержать