I was working on a toolbar and I ran into this issue where when I created a border around the outside of the toolbox there is a gap between the content of the toolbar and the actual toolbar border. I have tried making the padding and margin 0.
#tool-panel {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
z-index: 1000;
position: absolute;
top: 25px;
right: 370px;
border: 1px solid black;
background-color: whitesmoke;
}
.elem {
padding: 3px;
width: 30px;
height: 30px;
background-color: whitesmoke;
border-bottom: 1px solid black;
}
<div id="tool-panel">
<div id="ruler" class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
</div>
This image shows the problem:
There is no
border-collapse
here, like there is for<table>
s. So the problem is caused because there isn't a true connection between the inner border (on the children) and the outer border on the parent.One alternative you could use, is to remove the border from the parent (
#tool-panel
) and instead only use the one on the children (as you're already using that anyway):Another alternative (in certain conditions) could be to remove the border from the child (
.elem
), keep the border on the parent (#tool-panel
), and:And just for good measure, a third approach could be to set: