Frontend | Вопросы собесов on Telegram: “🤔 Как значения box-size влияют на размер элемен…”

🤔 Как значения box-size влияют на размер элемента?

Значения свойства box-sizing в CSS определяют, как учитываются отступы (padding) и рамки (border) при расчете размера элемента (width и height). Это влияет на окончательные размеры и внешний вид элемента на странице.

🚩Значение content-box

Это значение по умолчанию для всех элементов. Когда вы устанавливаете размеры элемента с box-sizing: content-box, ширина и высота элемента включают только содержимое (content), но не включают отступы и рамки.

.element {
    box-sizing: content-box; /* значение по умолчанию */
    width: 200px;
    padding: 20px;
    border: 10px solid black;
}

🚩Расчет размера

🟠Ширина
200px (содержимое) + 20px (отступ слева) + 20px (отступ справа) + 10px (рамка слева) + 10px (рамка справа) = 260px.
🟠Высота
аналогично рассчитывается с учетом отступов и рамок сверху и снизу.

🚩Значение border-box

При использовании значения border-box, размеры элемента (width и height) включают содержимое, отступы и рамки. Это делает расчет размеров более простым и предсказуемым.

.element {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 10px solid black;
}

🚩Расчет размера

🟠Ширина
200px уже включает отступы и рамки, то есть фактическая ширина содержимого будет 140px (200px - 20px (отступ слева) - 20px (отступ справа) - 10px (рамка слева) - 10px (рамка справа)).
🟠Высота
аналогично, высота включает отступы и рамки.

🚩Пример для сравнения

HTML

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

CSS

div {
    margin: 10px;
    padding: 20px;
    border: 10px solid black;
}

.content-box {
    box-sizing: content-box;
    width: 200px;
    height: 100px;
}

.border-box {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
}

Ставь 👍 и забирай 📚 Базу знаний