The Box-sizing property in CSS3

Grammar:

Box-sizing:content-text | Border-box | Inherit

Content-box (default):

The width and height are applied to the element's content box, and the inner margin and border of the element are drawn outside the width and height.

Border-box:

The width and height of the element determines the bounding box of the element, meaning that any padding and borders specified for the element will be drawn within the set width and height, and the width and height of the content can be obtained by subtracting the border and padding from the set width and height.

Inherit

Specifies the value that inherits the Box-sizing property from the parent element.

Example: Content-box (default):

Border-box:

Browser compatibility:

IE8 and above support this property, Firefox needs to add browser vendor prefix-moz-, the lower version of iOS and Android browser also need to add-webkit-.

The Box-sizing property in CSS3