Issue
EDIT: idk when they fixed it but now it's ok in chrome
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>
Solution
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>
Answered By - Newo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.