WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 Box Sizing


CSS3 Box Sizing

box-sizing attribute allows you to define certain elements in some way to fit a specified area.

For example, if you need to place two bordered boxes side by side, you can do this by setting box-sizing to "border-box". This causes the browser to render a box with the specified width and height, and put the border and padding in the box.


Browser Support

The numbers in the table indicate the first browser version number that supports this attribute.

The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports this prefix attribute.

Property
box-sizing 10.0
4.0 - webkit-
12.0 8.0 29.0
2.0 - moz-
5.1
3.1 - webkit-
9.5

Without the CSS3 box-estimating Property

Usethis count for width and height

width + padding + border = actual width of an element
height + padding + border = actual height of an element

value Description
content-box This is the width and height behavior specified by CSS2.1. Specify the width and height of the element (minimum / maximum attributes) applicable to the width and height of the box. Except for padding and border layout and drawing of the specified width and height
border-box Specify width and height (minimum / maximum attributes) to determine the element border. That is, specifying the width and height of an element includes padding and border. You can get the width and height of the content by subtracting the border and padding from the set width and height, respectively.
inherit Specify the value of the box-sizing attribute, which should be inherited from the parent element
This div is smaller (width is 300px and height is 100px).

This div is bigger (width is also 300px and height is 100px).

Example

.div1 { width: 300px;
    height: 100px;
    border: 1px solid blue;
    } .div2 { width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    }
Try it yourself »

So, for quite a while web designers have indicated a littler width esteem than they needed, on the grounds that they needed to subtract out the padding and borders.

With CSS3, the box-sizing property explains this problem.


With the CSS3 box-estimating Property

The CSS3 box-sizing property enables us to component the padding and border in a component all out width and height.

If you set box-sizing: border-box; on a component padding and border are incorporated into the width and height:

This both div are same size

Final

above in HTML , with box-sizing: border-box; added to both <div> elements:

Example

.div1 { width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
    } .div2 { width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
    }
Try it yourself »

final results box-sizing: border-box; is so much better, Many client .

The code beneath guarantees that all components are estimated in this progressively natural way. Numerous programs as of now use box-sizing: border-box; for many structure components (however not all - which is the reason inputs and textareas appear to be unique at width: 100%;).

Applying this to all components is sheltered and wise:

Example

* {
    box-sizing: border-box;
}
Try it yourself »