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?

Kamaboko Gonpachiro
  • 13
  • 4

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
  • 51
  • 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) – Kamaboko Gonpachiro 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. – Kamaboko Gonpachiro May 10 '21 at 07:54