Menu
I am trying to understand why the border size is not exactly the size I am setting with my CSS rules. Here is a fiddle and here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>P inside Body</title>
<link rel="stylesheet" href="stylesheets/working.css">
</head>
<body>
<h2>Hello World!</h2>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,
quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum
fugiat quo voluptas nulla pariatur?
</p>
</body>
</html>
And here is the CSS file:
body {
background-color: antiquewhite;
border: 10px solid black;
padding: 10px 20px 30px 40px;
margin: 10px 10px;
box-sizing: border-box;
color: darkblue;
}
p {
width: 400px;
padding: 10px 10px;
border: 3px solid red;
box-sizing: inherit;
}
When I am inspecting the <p> element, I see that the border size is not exactly 3px but it is 2.222.
Any clue why?
Edit / Update
I am using Chrome Version 46.0.2490.80 (64-bit) on a Mac OS X Yosemite. It is true that the problem appears with Chrome inspection. When I am using Firefox (Version 41.0.2) border is correctly displayed with size 3. Same goes for Safari (Version 9.0 (10601.1.56.2)). It displays size 3.
So, what is the "problem" with Chrome?
812
This is a stupid mistake that was not obvious at all. But I want to post here the correct answer/solution to this problem in order to save sometime for anybody else that might come to the same situation.
The problem was the zoom level on my Chrome browser. It was on 90% (which was not easy to identify) and that made the Chrome recalculate the sizes using the zoom scaling.
When I reset the zoom back to 100%, then border was displayed with the correct size on the developer tools box model.
The whole story was really confusing. Because the other properties were correct. Only border was not correct.
I spent a lot of time on this. Hopefully, next one will not.
87
Just want to add to the existing answer. In my case the browser (Google Chrome version 111.0.5563.111 Official Build 64-bit) has 100% zoom level but the border still has different size in devtool (while in Microsoft Edge it has identical size). I'm using Windows 10 64-bit. The reason is, in my Windows Display Setting, the "Scale and layout" was on 125% (it's the "Recommended" scale though). Changing it to 100% will fix the problem, but then the font size of all of my apps would be too small. Maybe Google Chrome couldn't read this setting from Windows, while Microsoft Edge does.
26
answered Sep 22 '25 09:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
