How to calculate the width according to the available codes?

Question

css

It is not possible to correctly calculate the width by the code:

span 
{
display: block;
width: 120px; 
padding: 10px 15 px 20px 25px; 
border: 1px solid#00000
}

It turns out that the width is 162px or because of the property it will turn out 120px? Also interested in how other properties can affect and can, for example: ? display: blockdisplayinline

Answer 1

Look at the box-sizing property
By default, the width of a box in the browser is the sum of width, padding, and border.
120 + 15 + 25 + 1 + 1 = 162
If you specify box-sizing:border-box, then the final width will be determined by the width property

I am also interested in how other display properties can affect and can, for example: inline?

Yes they can.
It is useless to write width to inline, it will not be applied at all, but will be calculated according to the content.