It is because of a property referred to as box-sizing which determines how the peak and width are calculated, with respect to padding and margin.
So in your state of affairs, the button has box-sizing: border-box; which MDN defines as:
border-box tells the browser to account for any border and padding in
the values you specify for a component’s width and top. In case you set
a component’s width to 100 pixels, that 100 pixels will embody any
border or padding you added, and the content material field will shrink to soak up
that additional width. This sometimes makes it a lot simpler to measurement
parts.
So the border and padding are minused from the set top and width. Therefore you get calculations like under.
If you don’t like this conduct, you’ll be able to change to box-sizing: content-box; which MDN defines as:
content-box provides you the default CSS box-sizing conduct. In case you set
a component’s width to 100 pixels, then the ingredient’s content material field will
be 100 pixels extensive, and the width of any border or padding will probably be
added to the ultimate rendered width, making the ingredient wider than
100px.
Right here the peak and width don’t change and the border and padding are added to the outer dimensions of the ingredient.
