CODEWITHSUNDEEP
htmlcssborder
Telergoel
Telergoel

Reputation: 353

Inconstant gap between border and content

I am having an issue with a simple container with borders: a small gap appears randomly on any edges between the container's borders and content, which is visible when this content has a background. This snippet sums it up very quickly:

.container {
  width: 100px;
  height: 50px;
  border: 2px solid black;
  background: yellow;
  margin-bottom: 5px;
}

.leftBox {
  width: 30%;
  height: 100%;
  background: red;
}
<div class="container">
  <div class="leftBox"></div>
</div>
<div class="container">
  <div class="leftBox"/></div>
</div>
<div class="container">
  <div class="leftBox"/></div>
</div>
<div class="container">
  <div class="leftBox"/></div>
</div>

And here is a picture of the result I get with Chrome, in case the issue is browser-dependant:

enter image description here

Any idea of why I get this result? Any workaround? Thanks

EDIT: I found out that I'm getting the same result with any browser BUT only on my laptop screen: no more gap if I display the web page on another device! What kind of witchcraft is this?

EDIT: issue was caused by Windows scaling and thus unrelated to the css I wrote. See answer below.

Upvotes: 4

Views: 793

Answers (2)

luek baja
luek baja

Reputation: 1674

For people that really need a reliable fix, you can set an identical border on the child element, and increase the z-index so it is on top of the parent.

I could not replicate the problem within a snippet but hopefully the answer is self explanatory.

Upvotes: 0

Telergoel
Telergoel

Reputation: 353

Just found out where the issue comes from: two screens, same resolution, different result. Only difference between the screens was Windows scale set to 125% on my laptop screen. Problem disappears when I reset it to 100%. Strange behavior! No workaround then I guess, only letting down people with Windows scaling activated...

Upvotes: 1

Related Questions