How to calculate content area width by code?

Question

css

Could you explain how to calculate the width of the content area of ​​the .content element.



.wrapper
{
box-sizing: border-boxl;
width: 500px
padding: 20px
}

.content
{
box-sizing: border-box;
padding: 10px
}
What to pay attention to when calculating, and under what properties, something can change into a solution?

Answer 1

The .wrapper content is 500 − 20 * 2 = 460px wide. If the .content is inside the .wrapper, then the .content content will be 460 − 10 * 2 = 440px wide. In both cases, we subtract the left and right padding. If there was a border, it would also be subtracted.

Answer 2

getComputedStyle

(2 pixels go to border 1px + 1px)