1

.div1 {
  width: 200px;
  height: 100px;
  padding: 25px;
  border: 10px solid blue;
  box-sizing: border-box;
}
<div>
  <div class="div1">
  </div>
</div>

This is what i got in the browser

can someone explain why the border is 9.998px instead of 10px? Also when i added up all the border and padding, it was not exactly to 200px. Does this have anything do with the browser's default styles?

Dave
  • 13
  • 4
  • I think it's purely specific. [Here](https://imgur.com/a/2UQo7sv)'s what I see. Also, does 0.002px really make a difference? – Spectric May 10 '21 at 02:50
  • From everything that I can see that border is 10px... Could you tell me how you have found out it is 9.998 pixels? – Dat Boi May 10 '21 at 03:12
  • @DatBoiTrump using the chrome dev tools. i have attached a pic in the question. – Dave May 10 '21 at 04:12

1 Answers1

0

By default the width and height property just sets the width or the height of the content area, that is without padding and border, if you want to include them you need to set the property box-sizing to border-box.

You can do it in your body like this:

body {
  box-sizing: border-box;
}

About the border not beign exactly 10px it may be an issue with rounding or something, I tested it in Firefox and Edge and it gives me 10px, check if the zoom of your browser is set to 100%.

fadfa
  • 76
  • 1
  • 4
  • I just now found out something weird. The browser (chrome) is showing exactly 10px when i pasted the path of the file on the address bar directly instead of using the "Live Server" extension on VS Code. When i use the Live server extension, the border is 9.998px in all of my browsers (chrome, edge, opera) – Dave May 10 '21 at 04:04
  • @Dhev that's weird, it must probably be an issue with Live Server then. Are there any updates for the extension? – fadfa May 10 '21 at 04:46
  • 1
    Nope. it is up to date. I added my issue on the publisher's github repo. – Dave May 10 '21 at 07:54