мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Свойство box-sizing

Свойство box-sizing позволяет менять способ расчета размеров элемента.

По умолчанию добавление padding расширяет элемент: если мы задали ширину width 100px и padding-left в 20px, то реальная ширина элемента будет 120px.

А если мы зададим еще и border-left в 10px, то реальная ширина элемента станет 130px. То есть padding и border расширяют блок (и по ширине, и по высоте). Это поведение можно поменять с помощью box-sizing.

Синтаксис

селектор { box-sizing: content-box | border-box; }

Значения

Значение Описание
content-box И padding, и border расширяют блок.
border-box Ни padding, ни border не расширяют блок.

Значение по умолчанию: content-box.

Пример . Стандартное поведение

Сейчас оба блока имеют одинаковую высоту и ширину, однако у второго блока padding задан, а у первого - нет. Посмотрите, как отличаются их размеры:

<div id="elem1">elem1</div> <div id="elem2">elem2</div> #elem1 { width: 300px; height: 100px; margin-bottom: 10px; background: #f1f1f1; } #elem2 { padding: 50px; width: 300px; height: 100px; background: #f1f1f1; }

:

Пример . Стандартное поведение

Сейчас оба блока имеют одинаковую высоту и ширину, однако у второго блока задана граница в 10px, а у первого - нет. Посмотрите, как отличаются их размеры:

<div id="elem1">elem1</div> <div id="elem2">elem2</div> #elem1 { width: 300px; height: 100px; background: #f1f1f1; } #elem2 { border: 10px solid black; width: 300px; height: 100px; background: #f1f1f1; }

:

Пример . Стандартное поведение

Сейчас второй блок имеет и padding, и границу в 10px:

<div id="elem1">elem1</div> <div id="elem2">elem2</div> #elem1 { width: 300px; height: 100px; background: #f1f1f1; } #elem2 { padding: 50px; border: 20px solid black; width: 300px; height: 100px; background: #f1f1f1; }

:

Пример . Значение border-box

Добавим второму элементу значение border-box для свойства box-sizing. Теперь размеры и первого и второго элемента станут одинаковыми:

<div id="elem1">elem1</div> <div id="elem2">elem2</div> #elem1 { width: 300px; height: 100px; background: #f1f1f1; } #elem2 { box-sizing: border-box; padding: 50px; border: 10px solid black; width: 300px; height: 100px; background: #f1f1f1; }

:

Смотрите также

  • свойство outline,
    которое делает границу, не расширяющую элемент