Why is the child div offset?

user_2725810 0
Viewed 144

There is something very basic about CSS that I seem to be missing. Consider (CodePen):

/* Reset */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  margin-block-start: 0;
  margin-block-end: 0;
}

.parent {
  width: 5rem;
  height: 3rem;
  border: 3px solid green;
}

.child {
  width: 5rem;
  height: 3rem;
  border: 3px solid blue;
}
<div class="parent">
  <div class="child"></div>
</div>

Here is the result:

enter image description here

Given that there are no paddings or margins, what is the narrow white space between the two borders?

css html
1 Answers

This clearly is a rendering bug in Chromium-based browsers, as I was able to reproduce the issue both in Chrome and Edge at 250% zoom level, and in the code pen also at 125% zoom level (current stable version, MacOS 12.0.1, ARM).

I've raised an issue in the chromium bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=1275530

user_37443040
Related