box-sizing
Применяется для изменения алгоритма расчета ширины и высоты элемента.
Согласно спецификации CSS ширина блока складывается из ширины контента ( width ), значений отступов ( margin ), полей ( padding ) и границ ( border ). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.
Синтаксис
box-sizing: content-box | border-box | padding-box | inherit
Значения
content-box Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ. border-box Свойства width и height включают в себя значения полей и границ, но не отступов ( margin ). Эта модель используется браузером Internet Exporer в режиме несовместимости. padding-box Свойства width и height включают в себя значения полей, но не отступов ( margin ) и границ ( border ). inherit Наследует значение родителя.
HTML5 CSS3 IE Cr Op Sa Fx
box-sizing
В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента ( width ), полей слева и справа ( padding ) и толщины границ ( border ). Ширина второго слоя равняется 300 пикселов за счет применения свойства box-sizing . Результат примера в браузере Opera показан на рис. 1.
Рис. 1. Ширина блоков
Браузеры
Firefox поддерживает нестандартное свойство -moz-box-sizing .
Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 поддерживают нестандартное свойство -webkit-box-sizing .
Internet Explorer, Chrome, Opera и Safari не поддерживают значение padding-box .
Border добавляет ширины элементу, как избежать?
Здравствуйте!
Есть сетка из блоков, при клике добавляю класс с border: 2px, чтобы выделить выбранный объект. Естесственно рамка добавляет эти два пикселя со всех сторон и выделенный объект отодвигает близлежайщие объекты, от этого сетка криво смотрится.
Есть решения как можно исправить?
- Вопрос задан более трёх лет назад
- 4071 просмотр
Комментировать
Решения вопроса 1
Михаил Чирский @chirskiy_mixail
Очень давно занимаюсь версткой, имею огромный опыт
Я обычно использовал Box-shadow, и все работает без проблем, св-во box-sizing, решает вашу проблему, ну тогда надо изначально всем блокам задавать border: 2px solid transparent, а у выделенного элемента уже менять на цвет, border-color: #333; к примеру, ну я бы советовал тень, там и нет проблем с расположением сверху, снизу или слева или справа, решать конечно вам.
Работа с отступами padding в CSS
Пусть некоторому элементу мы задали ширину 100px . В CSS это отнюдь не означает, что элемент действительно будет шириной в 100px . Дело в том, что добавление padding расширяет элемент и он становится больше, чем указано в свойстве width .
Давайте посмотрим на примере. Сделаем два блока, которым зададим ширину 100 пикселей. При этом второму блоку зададим padding , а первому — нет. В результате второй блок будет больше на размер отступа:
#elem1 < width: 100px; height: 100px; background: #f1f1f1; margin-bottom: 20px; >#elem2 < padding: 25px; /* задаем отступы */ width: 100px; height: 100px; background: #f1f1f1; >
Трепачёв Дмитрий © 2012-2023
t.me/trepachev_dmitry
box-sizing
CSS свойство box-sizing определяет как вычисляется общая ширина и высота элемента.
Интерактивный пример
По умолчанию в блоковой модели CSS ширина и высота, которую вы задаёте элементу применяется только для контента элемента. Если у элемента есть граница или внутренний отступ, то они добавляются к ширине и высоте, чтобы получить отображаемый на экране размер. Это значит, что когда вы выставляете ширину и высоту, вам придётся изменять значение, при добавлении границ и отступов. Например, если у вас есть четыре блока с width: 25%; , и у какого-нибудь из них есть граница или внутренний отступ слева или справа, то по умолчанию они не поместятся на одной строке.
Свойство box-sizing может изменять это поведение:
- content-box даёт стандартное поведение свойства box-sizing. Если вы выставите элементу ширину 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире ста пикселей.
- border-box говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента. Если вы выставите элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. Обычно это упрощает работу с размерами элементов.
**Примечание:**Часто выставление box-sizing: border-box полезно для размещения элементов. Оно сильно упрощает работу с размерами элементов, и как правило устраняет ряд подводных камней, на которые вы можете наткнуться, размещая контент. С другой стороны, используя position-relative или position: absolute , box-sizing: content-box позволяет позиционным значениям быть зависимыми только от контента, а не от границ и отступов, что иногда желательно.
Синтаксис
Для свойства box-sizing устанавливается единственное ключевое слово из списка значений ниже.
Значения
Это значение по умолчанию, определённое в CSS стандарте. Свойства width и height включают исключительно контент, и не включают padding и border. Например .box будет иметь ширину 370 пикселей.Размеры элемента рассчитываются следующим образом: width = ширина контента, и height = высота контента. (Границы и внутренние отступы не включаются в вычисление.)
Свойства width и height включают контент, внутренний отступ и границы, но не включают внешний отступ. Заметьте, что внутренний отступ и граница будут внутри блока. Например, .box будет иметь общую ширину 350 пикселей, а ширина контента составит 330 пикселей. Размер контента не может быть отрицательным, минимальное значение — 0, поэтому border-box невозможно использовать для скрытия элемента.Размеры элемента рассчитываются следующим образом: width = граница + внутренний отступ + ширина контента, и height = граница + внутренний отступ + высота контента.
Формальный синтаксис
box-sizing =
content-box | (en-US)
border-box
Примечание: Значение padding-box устарело
Пример
Этот пример показывает как разные значения box-sizing изменяют видимый размер двух идентичных элементов.
HTML
div class="content-box">Content boxdiv> br /> div class="border-box">Border boxdiv>
CSS
div width: 160px; height: 80px; padding: 20px; border: 8px solid red; background: yellow; > .content-box box-sizing: content-box; /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px Total height: 80px + (2 * 20px) + (2 * 8px) = 136px Content box width: 160px Content box height: 80px */ > .border-box box-sizing: border-box; /* Total width: 160px Total height: 80px Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */ >
Результат
Спецификации
Specification
CSS Box Sizing Module Level 3
# box-sizing
Начальное значение
content-box
Применяется к
все элементы, которые могут иметь ширину и высоту
Наследуется
нет
Обработка значения
как указано
Animation type
discrete
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.