Why isn't my browser displaying the exact size of my border when defined in my HTML?

Vinayak
June 4, 2023
184 views
0 votes
2 Answers

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.

Tags: css html

Answers

- NimraTahir
- June 4, 2023 at 8:50 pm
- 0 votes
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
}
```
Login or Signup to reply.