White Gap Between Border and Inner Object CSS

Question

When I have a parent element with a border, and an element on the inside, there is always a little white gap on all sides. This is despite me setting the inner padding and outer margin both to 0. Example:

#outer{
    height:10px;
    width:200px;
    border:2px solid black;
    overflow:hidden;
    border-radius:999px;
    padding:0;
}
#inner{
    width:100%;
    height:100%;
    background-color:red;
    margin:0;
}

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

In Chrome I suspect this is due to pixel rounding &/or anti-aliasing. — Paulie_D, Jan 03 '22 at 18:52
Or depending on the display type of the parent vs children simply having them on newlines can cause a spacing artifact whereas `
` with no space between the tags will sometimes resolve the issue. — Chris W., Jan 03 '22 at 18:53
That's a browser issue - in Firefox for example there is no gap. — Johannes, Jan 03 '22 at 18:53

score 2 · Accepted Answer · answered Jul 15 '22 at 07:44

Use outline instead of border.

ref: What is the difference between outline and border CSS properties?

#outer{
    height:10px;
    width:200px;
    outline:2px solid black;
    overflow:hidden;
    border-radius:999px;
    padding:0;
}
#inner{
    width:100%;
    height:100%;
    background-color:red;
    margin:0;
}

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

White Gap Between Border and Inner Object CSS

1 Answers1