Пример

.div2 {
width: 300px;
высота: 100 пикселей;
отступ: 50 пикселей;
граница: сплошной красный 1px;
размер коробки: рамка-рамка;
}

Так как результат использования box-sizing: border-box; намного лучше, многие разработчики хотят, чтобы на их страницы работать таким образом.

Приведенный ниже код обеспечивает более интуитивное определение размеров всех элементов.Многие браузеры уже используют box-sizing: border-box; для многие элементы формы (но не все — вот почему поля ввода и текста по-разному выглядят при ширине: 100%;).

Применять это ко всем элементам безопасно и разумно:

CSS Размер окна

Коробочная модель

Содержание

• 8.1 Размеры коробки
• 8.2 Пример полей, отступов и границ
• 8.3 Свойства полей: ‘margin-top’, ‘margin-right’, ‘margin-bottom’, ‘margin-left’ и ‘margin’
• 8.4 Свойства заполнения: ‘padding-top’, ‘padding-right’, ‘padding-bottom’, ‘padding-left’ и ‘padding’
• 8.5 Свойства границ
  • 8.5.1 Ширина границы: ‘border-top-width’, ‘border-right-width’, ‘border-bottom-width’, ‘border-left-width’ и ‘border-width’
  • 8.5.2 Цвет границы: ‘border-top-color’, ‘border-right-color’, ‘border-bottom-color’, ‘border-left-color’ и ‘border-color’
  • 8.5.3 Стиль границы: ‘border-top-style’, ‘border-right-style’, ‘border-bottom-style’, ‘border-left-style’ и ‘border-style’
  • 8.5.4 Сокращенные свойства границы: ‘border-top’, ‘border-right’, ‘border-bottom’, ‘border-left’ и ‘border’
• 8.6 Блочная модель для встроенных элементов в двунаправленном контексте

Модель блока CSS описывает прямоугольные блоки, которые генерируется для элементов в документе дерево и разложено согласно визуальному форматированию модель.

Каждая коробка имеет область содержимого (например, текст, изображение и т. д.) и необязательное окружение набивка , граница , и маржа областей; размер каждой области определяется свойствами, определенными ниже. Последующий диаграмма показывает, как эти области связаны, и терминология, используемая для обозначения на части поля, границы и заполнения:

Поля, граница и отступы могут быть разбиты на верхнюю, правую и нижний и левый сегменты (например, на схеме «LM» для левого поля, «RP» для правого отступа, «TB» для верхней границы и т. Д.).

Периметр каждой из четырех областей (контент, отступы, граница, и поле) называется «краем», поэтому каждый блок имеет четыре края:

край содержимого или внутренний край

Край содержимого окружает прямоугольник, заданный шириной и высотой. окна, которые часто зависят от отображаемого содержимого элемента. Четыре края содержимого определяют коробка содержимое коробки .

край обивки

Кромка набивки окружает набивку коробки.Если прокладка имеет ширину 0, край заполнения совпадает с краем содержимого. Четыре края обивки определяют коробка набивка .

бордюрный край

Край границы окружает границу рамки. Если граница имеет ширину 0, край границы такой же, как край заполнения. Четыре граничных края определяют границу бокса. ящик .

край поля или внешний край

Край поля окружает поле поля.Если маржа имеет ширину 0, край поля такой же, как край границы. Четыре края поля определяют поле поля. ящик .

Каждый край может быть разбит на верхний, правый, нижний и левый край.

Размеры области содержимого блока — ширина содержимого и высота содержимого — зависят от нескольких факторов: генерирует ли элемент коробка имеет ширину или свойство ‘высота’ установить, содержит ли поле текст или другие поля, независимо от того, ящик стол и т. д.Обсуждаются ширина и высота коробки. в главе о визуальном форматировании детали модели.

Стиль фона для областей содержимого, отступов и границ поле определяется свойством ‘background’ генерирующий элемент. Фон полей всегда прозрачен.

В этом примере показано, как поля, отступы и границы взаимодействовать. Пример HTML-документа:

  <ГОЛОВА>
    
    
  
  <ТЕЛО>
    

      
 Первый элемент списка
      
 Второй элемент списка
           немного дольше, чтобы проиллюстрировать упаковку.
    
  

приводит к дереву документов с (среди других отношений) элемент UL, который имеет два LI дети.

Первая из следующих диаграмм иллюстрирует, что этот пример будет производить. Второй иллюстрирует взаимосвязь между поля, отступы и границы элементов UL и его дочерние элементы LI. (Изображение не в масштабе.)

Обратите внимание, что:

• Ширина содержимого для каждого блока LI равна рассчитывается сверху вниз; содержащий блок для каждого блока LI устанавливается элементом UL.
• Высота поля поля каждого блока LI зависит от высоты его содержимого, плюс верх и низ отступы, границы и поля.Обратите внимание, что вертикальные поля между Ящики LI рушатся.
• Правое заполнение полей LI было установлено на нулевую ширину (свойство padding). В Эффект очевиден на второй иллюстрации.
• Поля блоков LI прозрачны — поля всегда прозрачный — цвет фона (желтый) отступов UL и через них просвечиваются области содержания.
• Второй элемент LI определяет пунктирную границу ( свойство ‘border-style’).

Свойства поля определяют ширину области поля поля.Сокращенное свойство ‘margin’ устанавливает поля для всех четырех сторон, в то время как другие свойства полей устанавливаются только их соответствующая сторона. Эти свойства применяются ко всем элементам, но вертикальные поля не повлияют на незамещенные встроенные элементы.

Свойства, определенные в этом разделе, относятся к тип значения, который может принимать одно из следующих значений:

<длина>

Задает фиксированную ширину.

<процент>

Процент рассчитывается относительно ширины сгенерированного блока содержащий блок.Обратите внимание, что это верно и для полей «верхняя граница» и «нижняя граница». Если ширина содержащего блока зависит от этого элемента, то результирующий макет не определен в CSS 2.1.

авто

См. Раздел о расчете ширины и поля для поведения.

Отрицательные значения свойств маржи разрешены, но могут быть ограничения, зависящие от реализации.

‘верхнее поле’ , ‘нижнее поле’

Значение:	<ширина-маржи> | наследовать
Начальный:	0
Применимо к:	всем элементам, кроме элементов с табличным отображением типы, отличные от table-caption, table и inline-table
Унаследовано:	нет
В процентах:	относится к ширине содержащего блока
Медиа:	визуальный
Вычисленное значение:	указанный процент или абсолютная длина

Эти свойства не влияют на незамещенные встроенные элементы.

‘правое поле’ , ‘левое поле’

Значение:	<ширина-маржи> | наследовать
Начальный:	0
Применимо к:	всем элементам, кроме элементов с табличным отображением типы, отличные от table-caption, table и inline-table
Унаследовано:	нет
В процентах:	относится к ширине содержащего блока
Медиа:	визуальный
Вычисленное значение:	указанный процент или абсолютная длина

Эти свойства устанавливают верхнее, правое, нижнее и левое поле коробка.

Пример (ы):

h2 {margin-top: 2em}
 

«маржа»

Значение:	<ширина-маржи> {1,4} | наследовать
Начальное:	см. Отдельные свойства
Применимо к:	всем элементам, кроме элементов с табличным отображением типы, отличные от table-caption, table и inline-table
Унаследовано:	нет
В процентах:	относится к ширине содержащего блока
Медиа:	визуальный
Расчетное значение:	см. Отдельные свойства

Свойство «маржа» сокращенное свойство для установки ‘margin-top’, ‘margin-right’, ‘margin-bottom’ и ‘margin-left’ в одном месте в таблица стилей.

Если есть только одно значение компонента, оно применяется ко всем стороны. Если есть два значения, верхнее и нижнее поля установлены на первое значение, а правое и левое поля равны установить на второй. Если есть три значения, верхнее установлен на первое значение, левый и правый установлены на второй, а нижний установлен на третий. Если есть четыре значения, они применяются к верхнему, правому, нижнему и левому, соответственно.

Пример (ы):

body {margin: 2em} / * все поля установлены на 2em * /
body {margin: 1em 2em} / * сверху и снизу = 1em, справа и слева = 2em * /
body {margin: 1em 2em 3em} / * сверху = 1em, right = 2em, bottom = 3em, left = 2em * /
 

Последнее правило приведенного выше примера эквивалентно примеру ниже:

body {
  маржа сверху: 1em;
  маржа справа: 2em;
  нижнее поле: 3em;
  маржа слева: 2em; / * скопировано с противоположной стороны (справа) * /
}
 

8.3.1 Сворачивающиеся поля

В CSS — смежные поля двух или более блоков (которые могут или могут не быть братьями и сестрами) могут объединяться в единое поле. Маржа которые сочетаются таким образом, говорят, что коллапс , а полученная комбинированная маржа называется свернутой маржей .

Обрушение смежных вертикальных полей, за исключением:

• Поля поля корневого элемента не сжимаются.
• Если верхнее и нижнее поля элемента с зазором соприкасаются, его поля схлопываются с прилегающими полями следующих братьев и сестер но это результирующее поле не сжимается с нижним полем родительского блока.

Горизонтальные поля никогда не сжимаются.

Два поля соседствуют с тогда и только тогда, когда:

• оба принадлежат входным блокам уровня блока, которые участвовать в том же контексте форматирования блока
• без линий, без зазоров, без отступов и без границ их (обратите внимание, что определенная линия нулевой высоты коробки (см. 9.4.2) игнорируются для этой цели.)
• оба принадлежат смежным по вертикали краям бокса, т.е. образуют один из следующие пары:
  • верхнее поле блока и верхнее поле его первого входящего дочернего элемента
  • нижнее поле поля и верхнее поле его следующего входящего потока следующий брат
  • нижнее поле последнего входящего дочернего элемента и нижнее поле его родительский, если родитель имеет автоматически вычисленную высоту
  • верхнее и нижнее поля коробки, которая не устанавливает новый контекст форматирования блока и имеет нулевое вычисленное значение ‘min-height’, zero или ‘auto’ вычисленная «высота», и нет притекающие дети

Свернутая маржа считается прилегающей к другой марже, если таковая имеется его составляющих полей примыкает к этому краю.

Примечание. Прилегающие поля могут быть генерируется элементами, которые не связаны между собой как братья, сестры или предки.

Примечание вышеупомянутые правила подразумевают, что:

• Поля между плавающим ящиком и любой другой ящик не разрушается (даже между поплавком и его приточные дети).
• Поля элементов, которые устанавливают новые контексты форматирования блоков (например, поплавки и элементы с «переполнением», отличным от «видимого») делают не рухнуть со своими втекающими детьми.
• Поля абсолютно позиционированного коробки не разрушаются (даже с их дочерними элементами).
• Поля inline-block box не сворачиваются (даже с их притекающих детей).
• Нижняя граница элемента уровня входящего блока всегда схлопывается с верхним полем следующего уровня входящего блока брат или сестра, если у этого брата нет разрешения.
• Верхняя граница входящего в поток блочного элемента сжимается вместе с верхнее поле первого дочернего элемента на уровне блока, если элемент не имеет верхняя граница, без верхнего отступа и у дочернего элемента нет зазора.
• Нижнее поле прямоугольного блока в потоке с «высотой» «авто» и «минимальной высотой», равной нулю, схлопывается с нижним полем его последнего дочернего дочернего элемента на уровне блока, если поле не имеет нижнего отступа и нижнего края, а нижний край дочернего элемента поле не сжимается с верхним полем с зазором.
• Собственные поля бокса схлопываются, если свойство min-height равно нулю, и у него нет ни верхней, ни нижней границы, ни верхнего или нижнего отступа, и имеет «высоту» 0 или ‘auto’, и он не содержит строки, а все его приточные детские поля (если есть) обрушиваются.

Когда два или более поля сжимаются, результирующая ширина поля равна максимальная ширина сворачивающихся полей. В случае отрицательного поля, максимум абсолютных значений отрицательного прилегающего маржа вычитается из максимума положительного прилегающего поля. Если нет положительных полей, максимум абсолютные значения прилегающих полей вычитаются из нуля.

Если верхнее и нижнее поля блока примыкающий, то можно поля до рухнуть через это.В этом случае, положение элемента зависит от его отношения к другому элементы, поля которых сокращаются.

• Если поля элемента свернуты вместе с верхом его родительского элемента margin, верхняя граница поля определяется как такая же, как родители.
• В противном случае либо родитель элемента не участвует в поле схлопывается, или только нижнее поле родителя участвует. Положение верхнего края границы элемента такое же как было бы, если бы элемент имел ненулевую нижнюю границу.

Обратите внимание, что положения свернутых элементов через не влияют на положение других элементов с чьи поля они обрушиваются; положение верхнего края границы требуется только для определения потомков этих элементов.

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

Свойства, определенные в этом разделе, относятся к тип значения, который может принимать одно из следующих значений:

<длина>

Задает фиксированную ширину.

<процент>

Процент рассчитывается с помощью относительно ширины содержащего блока сгенерированного блока, даже для ‘padding-top’ и ‘padding-bottom’. Если ширина содержащего блока зависит от этого элемента, то результирующий макет не определен в CSS 2.1.

В отличие от свойств полей, значения для значений заполнения не могут быть отрицательный. Как и свойства полей, процентные значения для заполнения Свойства относятся к ширине содержащего блока сгенерированного блока.

Эти свойства устанавливают верхнее, правое, нижнее и левое заполнение коробка.

Пример (ы):

цитата {padding-top: 0.3em}
 

‘набивка’

Значение:	{1,4} | наследовать
Начальное:	см. Отдельные свойства
Применимо к:	всем элементам, кроме table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column
Унаследовано:	нет
В процентах:	относится к ширине содержащего блока
Медиа:	визуальный
Расчетное значение:	см. Отдельные свойства

Свойство padding — это сокращенное свойство для установки ‘padding-top’, ‘padding-right’, ‘padding-bottom’ и ‘padding-left’ в одном месте в таблице стилей.

Если есть только одно значение компонента, оно применяется ко всем стороны. Если есть два значения, верхнее и нижнее отступы установлены на первое значение, а правое и левое отступы установить на второй. Если есть три значения, верхнее установлен на первое значение, левый и правый установлены на второй, а нижний установлен на третий. Если есть четыре значения, они применяются к верхнему, правому, нижнему и левому, соответственно.

Цвет поверхности или изображение области заполнения задается через свойство background:

Свойства границы определяют ширину, цвет и стиль области границы рамки.Эти свойства применяются ко всем элементам.

Примечание. В частности, для HTML, пользовательские агенты могут отображать границы для определенных элементов пользовательского интерфейса (например, кнопки, меню и т. д.) иначе, чем для «обычные» элементы.

8.5.1 Ширина границы: ‘border-top-width’, ‘border-right-width’, ‘border-bottom-width’, ‘border-left-width’ и ‘border-width’

Свойства ширины границы определяют ширину области границы. Свойства определенные в этом разделе относятся к <ширина-границы> тип значения, который может принимать одно из следующих значений:

thin

Тонкая кайма.

средний

Средняя граница.

толстая

Толстая рамка.

<длина>

Толщина границы имеет явное значение. Явный ширина границы не может быть отрицательной.

Интерпретация первых трех значений зависит от пользователя агент. Однако должны соблюдаться следующие отношения:

‘тонкий’ <= 'средний' <= 'толстый'.

Кроме того, эта ширина должна быть постоянной во всем документе.

Эти свойства устанавливают ширину верхней, правой, нижней, и левая граница поля.

‘ширина границы’

Значение:	<ширина-границы> {1,4} | наследовать
Начальное:	см. Отдельные свойства
Применимо к:	всем элементам
Унаследовано:	нет
В процентах:	Н / Д
Медиа:	визуальный
Расчетное значение:	см. Отдельные свойства

Это свойство является сокращенным свойством для установки ‘ширина-границы’, ‘ширина-правая-граница’, ‘ширина-нижняя-граница’, а также ‘border-left-width’ в то же место в таблице стилей.

Если есть только одно значение компонента, оно применяется ко всем стороны. Если есть два значения, верхняя и нижняя границы установлены на первое значение, а правая и левая стороны установить на второй. Если есть три значения, верхнее установлен на первое значение, левый и правый установлены на второй, а нижний установлен на третий. Если есть четыре значения, они применяются к верхнему, правому, нижнему и левому, соответственно.

Пример (ы):

В приведенных ниже примерах в комментариях указывается результирующая ширина. верхней, правой, нижней и левой границ:

h2 {border-width: thin} / * тонкий тонкий тонкий тонкий * /
h2 {border-width: thin толстый} / * тонкий толстый тонкий толстый * /
h2 {border-width: thin толстый средний} / * тонкий толстый средний толстый * /
 

8.5.2 Цвет границы: ‘цвет верхней границы’, ‘граница-правый-цвет’, ‘цвет нижней границы’, ‘border-left-color’ и ‘цвет границы’

Свойства цвета границы определяют цвет границы рамки.

‘цвет рамки’

Значение:	[<цвет> | прозрачный] {1,4} | наследовать
Начальное:	см. Отдельные свойства
Применимо к:	всем элементам
Унаследовано:	нет
В процентах:	Н / Д
Медиа:	визуальный
Расчетное значение:	см. Отдельные свойства

Цвет границы свойство устанавливает цвет четырех границ.Значения имеют следующие значения:

<цвет>

Задает значение цвета.

прозрачный

Граница прозрачная (хотя может иметь ширину).

Цвет границы свойство может иметь от одного до четырех значений компонентов, а значения устанавливаются с разных сторон, как для ‘border-width’.

Если цвет границы элемента не указан со свойством границы пользовательские агенты должны использовать значение свойства color элемента как вычисленное значение для цвета границы.

Пример (ы):

В этом примере граница будет сплошной черной линией.

п {
  черный цвет;
  фон: белый;
  граница: сплошная;
}
 

8.5.3 Стиль границы: ‘border-top-style’, ‘border-right-style’, ‘border-bottom-style’, ‘border-left-style’ и ‘border-style’

Свойства стиля границы определяют стиль линии прямоугольника. граница (сплошная, двойная, пунктирная и т. д.). Свойства, определенные в этом раздел относится к тип значения, который может принимать одно из следующих значений:

нет

Без границы; вычисленная ширина границы равна нулю.

скрыто

То же, что «нет», за исключением пограничного конфликта разрешение для элементов таблицы.

пунктирная

Граница представляет собой серию точек.

штриховой

Граница представляет собой серию коротких отрезков линии.

цельный

Граница представляет собой одинарный отрезок линии.

двойной

Граница — две сплошные линии. Сумма две линии и пространство между ними равно значению ширины границы.

паз

Граница выглядит как резная в холст.

гребень

Противоположность «канавке»: граница выглядит так, словно выходит из холста.

вставка

Граница делает коробку похожей на он был встроен в холст.

исход

Противоположность «вставке»: граница делает коробку похожей на это выходило из холста.

Все границы рисуются поверх фона блока. Цвет границы, нарисованные для значений ‘Groove’, ‘Rridge’, ‘inset’ и ‘outset’ зависит от границы элемента свойства цвета, но UA могут выбрать свой собственный алгоритм для рассчитать фактические используемые цвета. Например, если цвет границы имеет значение «серебро», тогда UA может использовать градиент цветов из от белого до темно-серого, чтобы обозначить наклонную границу.

‘пограничный’

Значение:	{1,4} | наследовать
Начальное:	см. Отдельные свойства
Применимо к:	всем элементам
Унаследовано:	нет
В процентах:	Н / Д
Медиа:	визуальный
Расчетное значение:	см. Отдельные свойства

«Бордюрный стиль» свойство устанавливает стиль четырех границ.Может иметь от одного до четыре значения компонентов, а значения установлены с разных сторон, как для ‘border-width’ выше.

Пример (ы):

# xy34 {border-style: сплошная точка}
 

В приведенном выше примере горизонтальные границы будут «сплошными» и вертикальные границы будут «пунктирными».

Так как начальное значение стилей границ — «none», без границ будет виден, если не установлен стиль границы.

8.5.4 Сокращенные свойства границ: ‘граница-верх’, ‘граница-правая’, ‘нижняя граница’, ‘граница-левая’ и ‘border’

Это сокращенное свойство для установки ширины, стиля и цвет верхней, правой, нижней и левой границы поля.

Пример (ы):

h2 {border-bottom: толстый сплошной красный}
 

Приведенное выше правило устанавливает ширину, стиль и цвет границы. ниже элемент h2. Пропущенные значения установлены на их начальные значения. поскольку следующее правило не определяет цвет границы, граница будет иметь цвет, указанный в свойство ‘color’:

h2 {border-bottom: толстый сплошной}
 

Свойство «граница» — это сокращенное свойство для установки одинаковой ширины, цвета и стиля для все четыре границы коробки.В отличие от сокращенных свойств margin и padding, свойство border не может устанавливать разные ценности на четырех границах. Для этого одна или несколько других границ свойства должны использоваться.

Пример (ы):

Например, первое правило ниже: эквивалентен набору из четырех правил, показанных после него:

p {граница: сплошной красный}
п {
  border-top: сплошной красный;
  граница справа: сплошной красный;
  нижняя граница: сплошной красный;
  border-left: сплошной красный
}
 

Поскольку в некоторой степени свойства перекрывают друг друга функциональность, порядок, в котором указаны правила, важный.

Пример (ы):

Рассмотрим этот пример:

blockquote {
  граница: сплошной красный;
  граница слева: двойной;
  черный цвет;
}
 

В приведенном выше примере цвет левой границы черный, в то время как другие границы красные. Это связано с тем, что ‘border-left’ устанавливает ширина, стиль и цвет. Поскольку значение цвета не задается свойство ‘border-left’, это будет взят из «цвета» свойство. Тот факт, что свойство ‘color’ устанавливается после свойства ‘border-left’, не уместный.

Для каждого строкового блока UA должны принимать встроенные блоки, созданные для каждый элемент и визуализирует поля, границы и отступы в визуальном порядок (не логический порядок).

Когда свойство элемента direction — ltr, крайний левый сгенерированный блок первого строчного блока, в котором элемент имеет левое поле, левую границу и левое заполнение, а крайний правый сгенерированный блок последнего строчного блока, в котором элемент появляется, имеет правый отступ, правую границу и правое поле.

Когда свойство элемента direction — rtl, крайний правый сгенерированный блок первого строчного блока, в котором элемент имеет правый отступ, правую границу и правое поле, а крайний левый сгенерированный блок последнего строчного блока, в котором элемент появляется, имеет левое поле, левую границу и левый отступ.

CSS свойство размера коробки

Пример

Включить отступ и границу в то общая ширина и высота элемента:

# example1 {
box-sizing: border-box;
}

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Свойство box-sizing определяет, как ширина и высота элемента вычислено: должны ли они включать отступы и границы или нет.

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.

Синтаксис CSS

размер коробки: контент-бокс | граница-бокс | начальный | наследование;

Стоимость недвижимости

Другие примеры

Пример

Укажите две рамки с полями рядом:

div {
размер коробки: рамка-рамка;
ширина: 50%;
граница: сплошной красный 5 пикселей;
плыть налево;
}

Пример

Комплект «Коробка универсальная калибровочная»:

* {
размер коробки: рамка-рамка;
}

Связанные страницы

Учебное пособие по CSS: CSS Box Sizing

Ссылка на HTML DOM: свойство boxSizing