CSS box-sizing Properties

Tag: inherits the specified browser-specific by the height-allowed order method

Definition and usage

The Box-sizing property allows you to define specific elements that match a region in a specific way.

For example, if you need to place two boxes with borders side-by, you can set box-sizing to "Border-box". This allows the browser to render a box with the specified width and height, and place the border and padding into the box.

Grammar

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

value	Description
Content-box	This is the width height behavior specified by the CSS2.1. The width and height are applied to the element's content box, respectively. Draws the inner margin and border of the element outside the width and height.
Border-box	The width and height set for the element determines the bounding box of the element. That is, any padding and borders 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.

CSS box-sizing Properties