Content box: box-sizing — CSS | MDN

Leave a Comment / Разное / By /

box-sizing — CSS | MDN

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 устанавливается единственное ключевое слово из списка значений ниже.

Значения

content-box

Это значение по умолчанию, определённое в CSS стандарте. Свойства width и height включают исключительно контент, и не включают padding и border. Например .box {width: 350px; border: 10px solid black;} будет иметь ширину 370 пикселей.Размеры элемента рассчитываются следующим образом: width = ширина контента, и height = высота контента. (Границы и внутренние отступы не включаются в вычисление.)

border-box

Свойства width и height включают контент, внутренний отступ и границы, но не включают внешний отступ. Заметьте, что внутренний отступ и граница будут внутри блока. Например, .box {width: 350px; border: 10px solid black;}

будет иметь общую ширину 350 пикселей, а ширина контента составит 330 пикселей. Размер контента не может быть отрицательным, минимальное значение — 0, поэтому border-box невозможно использовать для скрытия элемента. Размеры элемента рассчитываются следующим образом: width = граница + внутренний отступ + ширина контента, и height = граница + внутренний отступ + высота контента.

Формальный синтаксис

box-sizing = 
content-box  | (en-US)
border-box

Примечание: Значение padding-box устарело

Этот пример показывает как разные значения box-sizing изменяют видимый размер двух идентичных элементов.

HTML

<div>Content box</div>
<br>
<div>Border box</div>

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 typediscrete

BCD tables only load in the browser

with JavaScript enabled.
Enable JavaScript to view data.
  • Блоковая модель CSS

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved? Learn

how to contribute.

This page was last modified on by MDN contributors.

CSS3: свойство Box-Sizing / Хабр

grokru

Время на прочтение 2 мин

Количество просмотров

118K

Разработка веб-сайтов *CSS *

Перевод

Автор оригинала: Thoriq Firdaus

Раньше, если мы делали div шириной и высотой 100px, добавляли padding 10px и border 10px, то получался квадрат не 100х100, а 140х140 px:

Но иногда требуется, чтобы div был фиксированной ширины при любых значениях padding и border. В CSS3 нам поможет свойство box-sizing.

Использование box-sizing

У этого свойства есть два значения:

  • content-box — по умолчанию, контент внутри div’а будет отображаться по-старому, т.е. как в примере выше: вместо 100х100 будет 140х140
  • border-box позволяет значения padding и border вычитать из ширины и длины блока, т.е. в нашем примере div останется с фиксированными параметрами, но для контента останется 60х60 px
div {
	width: 100px;
	height: 100px;
	padding: 10px;
	border: 10px solid #eaeaea;
	box-sizing: border-box;
	-moz-box-sizing: border-box; /*Firefox 1-3*/
	-webkit-box-sizing: border-box; /* Safari */
}

Поддержка браузерами

Свойство box-sizing поддерживает большинство современных браузеров: Firefox 3.6+, Safari 3+, Opera 8.5+ и Internet Explorer 8+. Актуальные данные можно посмотреть на сайте caniuse.com.

Практический пример

Рассмотрим реальный пример использования свойства box-sizing.

Есть меню из пяти пунктов:

<ul>  
    <li><a href="#">Menu 1</a></li>  
    <li><a href="#">Menu 2</a></li>  
    <li><a href="#">Menu 3</a></li>  
    <li><a href="#">Menu 4</a></li>  
    <li><a href="#">Menu 5</a></li>  
</ul>

Добавим немного CSS, в т.ч. фиксированную ширину меню в 500 px и ширину каждого элемента в 100 px:

nav {  
    width: 500px;  
    margin: 50px auto 0;  
    height: 50px;  
}  
nav ul {  
    padding: 0;  
    margin: 0;  
}  
nav li {  
    float: left;  
}  
nav a {  
    display: inline-block;  
    width: 100px;  
    height: 100%;  
    background-color: #ccc;  
    color: #555;  
    text-decoration: none;  
    font-family: Arial, sans-serif;  
    font-size: 12pt;  
    line-height: 300%;  
    text-align: center;  
}  
nav a {  
    display: inline-block;  
    width: 100px;  
    height: 100%;  
    color: #555;  
    text-decoration: none;  
    font-family: Arial, sans-serif;  
}  
nav li:nth-child(1) a {  
    background-color: #E9E9E9;  
    border-left: 0;  
}  
nav li:nth-child(2) a {  
    background-color: #E4E4E4;  
}  
nav li:nth-child(3) a {  
    background-color: #DFDFDF;  
}  
nav li:nth-child(4) a {  
    background-color: #D9D9D9;  
}  
nav li:nth-child(5) a {  
    background-color: #D4D4D4;  
    border-right: 0;  
}

Меню выглядит нормально:

Но при добавлении левого или правого border’а последний пункт меню съезжает, потому что не помещается:

nav a {  
    border-left: 1px solid #aaa;  
    border-right: 1px solid #f3f3f3;  
}

Но если использовать box-sizing, то этой проблемы нет:

nav a {  
    border-left: 1px solid #aaa;  
    border-right: 1px solid #f3f3f3;  
    box-sizing: border-box;  
    -moz-box-sizing: border-box;  
    -webkit-box-sizing: border-box;  
}

демо

Полезное чтиво по теме

— Box-sizing: border-box — FTW — Paul Irish
— Make better Web pages by understanding the CSS box model — Tech Republic

Теги:

  • css

Хабы:

  • Разработка веб-сайтов
  • CSS

Всего голосов 78: ↑66 и ↓12 +54

Комментарии 52

Кирилл @grokru

co-founder at Beau

Telegram

Комментарии Комментарии 52

border-box vs content-box — это против

border-box и content-box — это два значения свойства box-sizing . В отличие от content-box значение border-box указывает, что размер элемента также будет включать границу и отступы.

Предположим, что у нас есть элемент div размером 200px x 100px , границы и отступы 5px и 10px соответственно.

 .div { 
 ширина: 200 пикселей; 
 граница: 5 пикселей; 
 отступ: 10 пикселей; 
 }

В модели блока содержимого содержимое внутри элемента будет иметь те же размеры, что и сам элемент.

 .div { 
 /* ... */ 
 box-sizing: content-box; 
} 
 // Content Box 
 ◀ ︎acреды 200px inмобили ───────────────────────────┐ 
 | | 
 | ┌───────────────────────────────────────┐ | 
 | | | | 
 | | ┌───────────────┐ | | 
 | Граница| Прокладка | Содержание | | | 
 | | | | | | 
 | 5 пикселей | 10 пикселей | 200 пикселей | 10 пикселей | 5 пикселей | 
 | ◀ ︎acредон γ ▶ ▶ ︎ | ◀ ︎acмобильный ◀︎─────▶︎| 
 | | | | | | 
 | | └───────────────┘ | | 
 | | | | 
 | └───────────────────────────────────────┘ | 
 | | 
 └ackingsideabults ───────┘

В модели с рамкой размер содержимого должен вычитаться из размера элемента границы и заполнения. В частности, ширина содержимого составляет  200 – 5 * 2 – 10 * 2 = 170 пикселей .

 // Пограничная коробка 
 ◀ ︎--Bout ─ ▶ ︎ 
 ┌acмобильный ─────────┐ 
 | | 
 | ┌───────────────────────────────────────┐ | 
 | | | | 
 | | ┌───────────────┐ | | 
 | Граница| Прокладка | Содержание | | | 
 | | | | | | 
 | 5 пикселей | 10 пикселей | 170 пикселей | 10 пикселей | 5 пикселей | 
 | ◀ ︎acредон γ ▶ ▶ ︎ | ◀ ︎acмобильный ◀︎─────▶︎| 
 | | | | | | 
 | | └───────────────┘ | | 
 | | | | 
 | └───────────────────────────────────────┘ | 
 | | 
 └ackingsideabults ───────┘
  • margin vs padding

arrow vs обычная функция