CSS box-sizing property

CSS box-sizing

CSS box-sizing property is used to denote how a browser should calculate the height and width of an element.

CSS box-sizing property is used mainly to contain elements within an container perfectly.

CSS box-sizing have following values,

  • content-box : When it is used padding and border are set to the outside box. While width and height are set to the elements.
  • border-box : When it is used width, height and padding are added to the elements content. The border is added to the outside box.

Example

Try Yourself