CSS κουτί διαστάσεων ιδιότητα

Definition and usage

The box-sizing property allows you to define a specific way to match a specific element to an area.

For example, if you need to place two side-by-side framed boxes, you can set box-sizing to "border-box". This will cause the browser to display a box with specified width and height, and place the border and padding inside the box.

See also:

CSS3 Tutorial:Ατριβή3 χρήση διεπαφής χρήστη

HTML DOM Reference Manual:boxSizing property

Example

Specifies two side-by-side framed boxes:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Try it yourself

More examples are at the bottom of the page.

CSS syntax

box-sizing: content-box|border-box|inherit;

Attribute value

Value Description
content-box

This is the width and height behavior specified by CSS2.1.

Width and height are applied separately to the element's content box.

Padding and borders of the element are drawn outside the width and height.
border-box

The width and height set for the element determine the element's border box.

That is, any padding and border specified for the element will be drawn within the set width and height.

The width and height of the content can be obtained by subtracting the border and padding from the set width and height.
inherit Specifies that the value of the box-sizing property should be inherited from the parent element.

Technical details

Default value: content-box
Inheritance: no
Version: CSS3
JavaScript syntax: object.style.boxSizing="border-box"

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

The numbers with -webkit- or -moz- prefixes indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5