WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 Box Sizing


CSS3 Box Sizing

The CSS3 box-sizing property enables us to incorporate the cushioning and outskirt in a component's all out width and height.


Browser Support

The numbers in the table indicate the principal program form that completely bolsters the property.

Numbers pursued by - webkit-or - moz-determine the principal form that worked with a prefix.

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 + cushioning + fringe = real width of an element
stature + cushioning + outskirt = genuine tallness of an element

The component fringe and cushioning are added to the component's predefined width/height.

The following representation demonstrates two <div> components with the equivalent indicated width and height:

width is 250px and stature is 120px.

width is likewise 250px and tallness is 100px.

The two <div> components above end up with various sizes in the outcome (since div2 has a cushioning specified):

Example

.div1 {
    width: 250px;
    tallness: 120px;
    outskirt: 1px strong blue;
}

.div2 {
    width: 250px;
    tallness: 120px;
    cushioning: 60px;
    outskirt: 3px strong 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 cushioning 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 incorporate the cushioning and outskirt in a component all out width and height.

If you set box-measuring: fringe box; on a component cushioning and outskirt are incorporated into the width and height:

This both div are same size

Final

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

Example

.div1 {
    width: 250px;
    stature: 120px;
    fringe: 1px strong blue;
    box-measuring: fringe box;
}

.div2 {
    width: 250px;
    stature: 120px;
    cushioning: 30px;
    fringe: 1px strong red;
    box-measuring: outskirt box;
}
Try it yourself »

final results box-measuring: fringe 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-estimating: outskirt 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-measuring: fringe box;
}
Try it yourself »