2

Why the browser isn't showing the exact size of my border as mentioned in my html file?

I am trying to study the box model in CSS and so I created a box and defined some properties but inspecting the border size it isn't the exact as I mentioned in my code and everything else is fine.

.box {
  height: 400px;
  width: 400px;
  background-color: black;
  border-left: 5px solid red;
  border-right: 5px solid red;
  border-top: 5px solid red;
  border-bottom: 5px solid red;
  padding: 10px;
  margin: 10px;
}

.white {
  height: 50%;
  width: 50%;
  background-color: red;
  border: 2px solid black;
  margin: 10px;
}
<div class="box">
  <div class="white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa</div>
</div>

here as we can see in the code border size is 5px on each side but on inspecting in Chrome or Firefox the border size is 4.8px on each side.

tacoshy
  • 10,642
  • 5
  • 17
  • 34
Vinayak
  • 31
  • 2
  • The px setting works perfectly if you want to view the page at 100% size. If you zoom out, the percentage will be proportional to the reduction. If the displayed value shows 4.8 instead of 5px, then you are at a 96% zoom level, caused by some factor - typically triggered on a website using the [ CTRL ][ - ] button. – rozsazoltan Jun 04 '23 at 19:11

1 Answers1

0

This would return full screen. Also, check the sizes of chrome from sizes so that you would provide the appropriate dimensions.

Also, check this solution as well for further assistance.

 Screen {
     availWidth: 1920,
    availHeight: 1040,
    width: 1920,
    height: 1080,
    colorDepth: 24,
    pixelDepth: 24,
    top: 414,
    left: 1920,
    availTop: 414,
    availLeft: 1920
}
Nimra Tahir
  • 391
  • 1
  • 6