CSS is the acronym for “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages (HTML or XML). This language contains coding elements and is composed of these “cascading style sheets” which are equally called CSS files (.css).
Box-sizing:
The box-sizing CSS property sets how the total width and height of an element are calculated. By default, in the CSS box model, the width and height assigned to an element are applied only to the element’s content box. If the element has nay border or padding, this is then added to the width and height to arrive at the size of the box that’s rendered on the screen. This means that when one set width and height, one must adjust the value for any border or padding that may be added.
The box-sizing property can be used to adjust this behaviour:
- Content-box gives the default CSS box-sizing behaviour. If one set an element’s width to 100 pixels wide, the width of any border or padding will be added to the final rendered width, making the element wider than 100px.
- Border-box tells the browser to account for any border and padding in the values specified for an element’s width and height. If one set an element’s width to 100 pixels, then 100 pixels will include any border or padding added to it.
Syntax:
The box-sizing property is specified as a single keyword chosen from the list of values below.
Values
Content-box:
These are the initial and default values as specified by the CSS standard. The width and height properties include the content but do not include the padding, border, or margin.
For example. box {width: px; border: px solid black;} renders a box that is with some pixel wide.
Here, the dimensions of the element are calculated as width = width of the content, and height = height of the content. (Border and padding are not included in the calculation.)
Border-box:
The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box.
. box {width: px, border: px solid black;} renders a box that is with some pixel wide, with the area of content being some px wide. The content box can’t be negative and is floored to 0, making it impossible to use the border box to make the element disappear. Here the dimensions of the element are calculated as width = border + padding + height of the content.
Conclusion:
Content-box model takes the default values as already specifies in the CSS standard rule. It also includes element width and height of the web page contents but it does not include the padding borders and margins styles, but the borders-box model element width and height will include the padding and borders of the properties.
