Search code examples
cssgoogle-chromegoogle-chrome-devtools

Why does Chrome browser change the border size and does not set it to the one that I am requesting?

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.

Picture of the Box Model when inspecting the p element

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?

Solution

  • 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.