To be able to get 38.39px, other numbers instead of that one have to be used, why is that?
Using a div: https://jsfiddle.net/54cajrwg/
29.15px = 38.39px
Using button: https://jsfiddle.net/7pod3tw0/
38.401px; = 38.39px
Use the dev tools in your browser to see how the sizes are computed. You need to remember to take into account the width of the border in the overall dimensions
More information here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
You should also remember what Paul told you:
1 Like
The images I provided in the post are from the dev tools.
Look in the styles panel of devtools and then look down until you see the User Agent styles listed and then in the user agent styles for the button element you will see that it uses the box-sizing:border-box model by default. That means that border and padding are included inside the width and height dimensions but in the normal box model they are additive.
2 Likes
I forgot to add box-sizing: border-box to both of them, and that clears it up.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.