CSS3 Box Sizing

box sizing
CSS3 Box Sizing

CSS-3 Box-sizing property allows us to choose whether we want to include width/height, padding and border in total width/height of container or not.

Box-sizing

Possible values of Box-sizing

box-sizing use
content-box Box-sizing content-box calculate sum of css width/ height, padding and border as total width or height of content on DOM.
border-box Box-sizing border-box use only width or height as total width or height of content.


Box-sizing:Content Box

content-box

Box-sizing:content-box is default value of box-sizing. Since CSS2, we are using content box. Content-box calculate sum of width, padding and border in total width of box. However margin is not included.

            
            
    .col-3{box-sizing:content-box;}				// all latest browsers
			
            
          

Note: content-box is default value of box-sizing.


Box-sizing:Border Box

border-box

Css3 box-sizing:border-box was first used in IE Model. But Other browsers were following W3C spec, i.e. content-box. But in CSS3, we can use same border-box model. Border-box shows width of content equal to width given. That means no need to reduce width if padding or border is increased as content size will be equal to width.

            
            
    .col-3{box-sizing:border-box}				// all latest browsers

            
          

Note: box-sizing:border-box is supported in html5 supported browsers only.