Problem with box model_html/css_WEB-ITnose

I remember that I found on the Internet that if you declare a value in the CSS attribute, the values ​​​​of margins, padding and boxes are calculated in the height and width of the box, but I forgot that this attribute and What is this value? Ask the experts to tell you.

Also, I would like to ask why the CSS default margins, padding and box values ​​must be independent and not included in the height and width of the box? Is there any benefit to this?

Reply to discussion (solution)

When box-sizing is set to content-box, height and width only contain content, excluding padding and border
When set to border-box, height and width include padding and border

Take a look at the official W3C document:

http://www.w3.org/TR/css3- ui/#box-sizing

content-box
This is the behavior of width and height as specified by CSS2.1. The specified width and height (and respective min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height.
border-box
Length and percentages values ​​for width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified width and height properties. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0. Used values, as exposed for instance through getComputedStyle(), also refer to the border box.

Also, I would like to ask why the CSS default margins, padding and box values ​​must be separated and not included in the box. the height and width inside? Is there any benefit to this?

If I want to explicitly set the height and width of the content, but the height and width properties of css always include the dimensions of padding and border, then I won’t set it. You just have to calculate it first before setting it, right?
For example,

$(element).css('width', The expected width of the content padding-left padding-right border-left border- right);

Isn’t this quite troublesome, and if any one of padding-left, padding-right, border-left, border-right changes, it will affect the content of The width of

Also, I would like to ask why the CSS default values ​​for margins, padding and boxes should be separated and not included in the height and width of the box? Is there any benefit to this?

If I want to explicitly set the height and width of the content, but the height and width properties of css always include the dimensions of padding and border, then I won’t set it. You just have to calculate it first before setting it, right?
For example,

$(element).css('width', The expected width of the content padding-left padding-right border-left border- right);

Isn’t this quite troublesome, and if any one of padding-left, padding-right, border-left, border-right changes, it will affect the content of Width

Thank you very much.