6

I have div inside another div. If I have a border in the outer div I got a space in Microsoft Edge browser in some scales (100% or 125%). I think it's a rounding bug, but I don't know how to get rid of it.

html:

<div class="outer">
    <div class="inner"></div>
</div>

css:

.outer {
    background-color: black;
    float: left;
    border: 1px solid white;
}

.inner {
    width: 300px;
    height: 300px;
    background-color: yellow;
}

jsfiddle: https://jsfiddle.net/EvgeniiMalikov/4bbx9p5w/

As you can see there is black background visible between outer and inner div. If you don't see it try to change scale.

UPDATE: the gap really appears not between div elements, it's inside inner div close to its border. Discovered it by adding outline to inner div.

example screenshot

example screenshot

example screenshot with border and outline (gap between border and outline) example with outline

box-sizing: border-box;
border: 1px solid lime;
outline: 1px solid lime;
Evgenii Malikov
  • 427
  • 4
  • 12
  • what exactly you want? – Ykaro Lemes Nov 23 '15 at 12:04
  • Background of outer div should not be visible between outer div and its content. I drawing pvc window blocks and I have multiple inner divs and outer to share one big background image. Background should be visible only inside inner divs. – Evgenii Malikov Nov 23 '15 at 12:13
  • 4
    This is due to sub-pixel rendering problem. See this thread (and maybe one of the several tricks in the answers there might help you) -- http://stackoverflow.com/questions/5832869/single-sub-pixel-misalignment-of-divs-on-ipad-and-iphone-safari – Abhitalks Nov 23 '15 at 13:10
  • Can you post a small screenshot of what you're seeing, sharing also the current zoom-level of the viewport? Also, an example of what you'd like to achieve, as we may be able to help you find an alternative approach. – Sampson Nov 23 '15 at 16:44
  • Can you not remove the outer/inner div and just stick with one? If it's a width (percent/px) issue then just set `box-sizing: border-box` – powerbuoy Nov 23 '15 at 17:24
  • It is IE Edge specific case of sub-pixel rendering problem. Screenshot 2 with captured with border box. – Evgenii Malikov Nov 23 '15 at 17:41
  • @EvgeniiMalikov Can you show us what effect you'd like to achieve? – Sampson Nov 23 '15 at 19:22
  • @Sampson background shouldn't be visible thru inner element – Evgenii Malikov Nov 24 '15 at 06:59

1 Answers1

1

the border 1px is adding to the width 300px. you need to remove 1px from the width

.outer{background-color: black; float: left; border: 1px solid white}
.inner{width: 299px; height: 300px; background-color: yellow}

Here is the screenshot from Microsoft Edge enter image description here

Rami Sarieddine
  • 5,396
  • 35
  • 41