CSS - Box sizing (property and definition)



The box-sizing property is used to alter the default box model used to calculate widths and heights of elements.

The width and height are defined as the width and height:

depending of the box-sizing property value.

It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification (ie the content-box)

Firebug Box Sizing


Visual difference between content-box and border-box

p {
   box-sizing: content-box;
   width: 200px;
   border: 30px solid DeepSkyBlue;
<p>A p element with a width of 200px in a content box</p>


p {
   box-sizing: border-box;
   width: 200px;
   border: 30px solid DeepSkyBlue;
<p>A p element with a width of 200px in a border box</p>



box-sizing: content-box; /* default */
box-sizing: border-box; /* with the border and margin */
box-sizing: inherit; /* takes the value from its parent */



The width and height properties are measured including only the content, but not the padding, border or margin.

Css Box Size Content

Padding, border & margin will be outside of the box


The width and height properties include the padding and border, but not the margin.

Css Box Size Border

This is the box model used by Internet Explorer when the document is in Quirks mode.

padding and border will be inside of the box

The content box can't be negative and is floored to 0 making it impossible to use border-box to make the element disappear.


With the inherit value, the child box inherit the sizing of its parent.

This is mostly used to position a control bar on overlay with action button.


* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

Documentation / Reference

Discover More
CSS - Background (Image)

The background of an element is the total size of the element: including padding and border but not the margin. The margin is transparent. When two element overlap, you can send one element to...
CSS - Box Size

Sizing of a box The width and the height of a box are dependent of the: layout and of the box sizing parameters The sizes are calculated with respect to the edges of a rectangular box called a containing...
CSS - Boxes (Box Model)

CSS The Box model means that each element is represented as a rectangular box. The layout phase of the browser rendering engine creates the box model as a tree of box and determines: the , the...
Css Box Size Content
CSS - Height of a box

This page is the height of a box. From How it's calculated To How it's defined HTMLheight attributeHTMLimage...div element When a absolute length value is set, the value applied directly...
CSS - Spacing (Box Dimension)

spacing in CSS is not a specific term but refers generally to the setting of the following of a box properties: - the padding set how far from the border the text should be and is an area taken into...
CSS - Width property (of a box)

The width property specifies the width of boxes and it's calculation is defined by the box sizing property. HTMLCSS HTML width attributeHTMLimgiframe... If you want to set a width on a p element for...
Css Horizontal Alignement Result
CSS Block - Align (Left, Center, Right)

How to align a visual element with a block display horizontal positioning article You can align visual element on two level: on the box level: the box is aligned on the text level: the text in the...
HTML - Sizing (Width and Height attribute)

Not all HTML tag supports the Width and Height attributes. If you want to size a div, you need for instance to use the CSS sizing feature that supports the width property The width and height HTML...

Share this page:
Follow us:
Task Runner