0

Here I have two divs inside another div, the only problem is the white gap that is created between them.

.box{
  width: 400px;
  height: 400px;
  border: 5px solid black;
  margin: 20px auto;
}

.it1,.it2{
    width: 200px;
    height: 200px;
}

.it1{
    background-color: aqua;
}

.it2{
    background-color: brown;
}
<div class="box">
    <div class="it1"></div>
    <div class="it2"></div>
</div>

How it looks...
How I want it to look...

Maybe I'm just being picky or it could even be my OCD but I really need to know if I'm just doing something wrong. I could make the boarder bigger but that is just feels like a workaround.

disinfor
  • 10,865
  • 2
  • 33
  • 44
OryxGD
  • 1
  • 2
  • 2
    Welcome to Stack Overflow! The snippet shows it working as expected. What browser are you using? – disinfor Jul 27 '22 at 14:57
  • @disinfor Opera – OryxGD Jul 27 '22 at 14:59
  • Just as a note, using Chrome, I sometimes do see a white gap, but it appears and disappears when I mess around with the zoom function on the page. – SolarBear Jul 27 '22 at 15:01
  • I'm seeing the same thing as SolarBear, possibly a single-pixel difference when scaling the divs up where outer box is rounded up and inner boxes are rounded down? – Esther Jul 27 '22 at 15:03
  • 1
    Does your CSS have a CSS reset as well? That might help. At least `* { margin:0; padding:0; }` – Peter Krebs Jul 27 '22 at 15:04
  • @PeterKrebs Didn't seem to fix the problem in opera but I tried using chrome and the gaps are no longer there. I really hate browser inconsistancies. – OryxGD Jul 27 '22 at 15:11
  • Yes, that is the price of freedom, everybody wants to create their own browser engine. Be thankful you're not designing E-Mail templates. – Peter Krebs Jul 27 '22 at 15:13
  • Are you using a high DPI screen with scaling set to other than 100%? – Zoli Szabó Jul 27 '22 at 15:13
  • @ZoliSzabó 1440p with 100% scaling – OryxGD Jul 27 '22 at 15:18
  • @ZoliSzabó Oh I just saw my browser was zoomed to 150%. Thanks for pointing that out. – OryxGD Jul 27 '22 at 15:20
  • Does this answer your question? [Sub-Pixels calculated and rendered differently among browsers](https://stackoverflow.com/questions/34676263/sub-pixels-calculated-and-rendered-differently-among-browsers) – disinfor Jul 27 '22 at 16:19

1 Answers1

0

The problem comes down to inconsistancies between browsers, my browser scaling was set to 150% soo make sure to fiddle arround with that aswell. Ctrl + middle mouse button.

OryxGD
  • 1
  • 2
  • That does not actually solve the problem, you should consider in mind all the browsers with all the different zoom scalings. – Normal Jul 28 '22 at 20:38