box-sizing

Автор: | 16.09.2020

При создании своих проектов, начинающие верстальщики часто задаются вопросом, как сделать размер блока внутри родительского так, чтобы его границы не выпадали за того самого родителя. Для решения такого рода вопросов, было придумано свойство CSS box-sizing.

Значением по умолчанию является content-box

box-sizing  — свойство CSS определяющее как будет вычисляться ширина и высота элемента

Хорошим примером, помогающим сделать все красиво на вашем сайте будет применение box-sizing например, когда на сайте имеется 3 карточки товара, у каждой из карточек ширина 33%, плюс к этому вы делаете border, который добавит вам ширины, а так же вы хотите иметь у этих блоков margin, то при значении box-sizing: content-box; 

Вы получите ситуацию, что третий блок не поместится в вашей сетке и будет либо жать в сторону родителя, либо перескочит на следующую строку. Но применив box-sizing: border-box;

box-sizing

Пример использования

Код HTML

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

Код CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box { 
  box-sizing: content-box; 
  /* Общая ширина блока: 160px + (2 * 20px) + (2 * 8px) = 216px
     Общая высота блока: 80px + (2 * 20px) + (2 * 8px) = 136px */
}

.border-box { 
  box-sizing: border-box;
  /* Общая ширина блока: 160px - (2 * 20px) - (2 * 8px) = 104px
     Общая высота блока: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

 

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

 

Удачи в развитии ваших проектов!

box-sizing: 2 комментария

  1. Алиса

    «Жизни верь, она ведь обучает лучше всяческих книг». Премногое спасибо только за то, что сегодня даёте информацию, которая может помочь в нашей жизни.

  2. Дарья

    «Абсолютно всё трудное состоит из простого.» Прекрасно, что Вы умеете передать сведения элементарным, возможным для уяснения, образом.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *