box-sizing#

#Introduction

The box-sizing property defines whether fixed sizes (such as <length>s and <percentage>s) are assigned to the content box or to the border box. It affects the interpretation of all sizing properties, including width, height, min-width, min-height, max-width, max-height.

#Examples

css-apisrc/box-sizing/App.tsx

Code

Preview

#Syntax

box-sizing: border-box;
box-sizing: content-box;

#Values

• border-box

  Default value. The width and height properties include the content, padding, and border, but do not include the margin.

  Size calculation formula:

  width = border + padding + content

  height = border + padding + content

• content-box

  The width and height properties include the content, but does not include the padding, border, or margin.

  Size calculation formula:

  width = content

  height = content

#Formal definition

#Formal syntax

box-sizing = border-box | content-box

#Difference with the web

• Default value is border-box in Lynx, while content-box in web.
• It will not affect the interpretation of flex-basis, while Web will.

#Compatibility