Свойство box-sizing
Последнее обновление: 04.05.2011
Свойство box-sizing определяет, будет ли размер элемента включать только контент (по умолчанию) или контент, внутренние отступы и границы.
Допустимые значения
- content-box — поведение ширины и высоты как в спецификации CSS 2.1. Внутренние отступы и границы элемента находятся за пределами указанной ширины и высоты.
- border-box —внутренние отступы и границы элемента находятся в пределах указанной ширины и высоты. Ширина и высота непосредственно контента определяется вычитанием из указанного в свойстве значения значения границ и внутренних отступов элемента.
- inherit — наследует значение от родителя.
 |
 |
| иллюстрация box-sizing:content-box | иллюстрация box-sizing:border-box |
| Значение по умолчанию | content-box |
|---|---|
| Применимо | ко всем элементам |
| Наследование | нет |
| Версия CSS | CSS 3 |
| Поддерживается браузерами |
|
Пример
.block {
width:60px;
height:80px;
padding:5px;
border:2px solid #000;
box-sizing: content-box;
}
Твой код:
Результат:
большой полигон
Заметки
Это свойство относится к CSS3 модулю CSS3 Basic User Interface Module — кандидата в рекомендацию W3C с 11 мая 2004 года.
Safari 3 и выше и Chrome 1 и выше поддерживают аналогичное свойство -webkit-box-sizing, а Firefox 1.0 и выше -moz-box-sizing. Свойство -moz-box-sizing также поддерживает значение padding-box (ширина и высота включает внутренние отступы, но не включает границы).
По теме
- Box-sizing: переключаем блочную модель
- Box model — блочная модель
- Блочная модель в IE6
- Схлопывание margin
Показать комментарии