Unwanted gap between div content and border on the right side

Question

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:

Answer 1

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):

.elem {
  border: 1px solid black;
  border-bottom: none;
}
.elem:last-child {
  border-bottom: 1px solid black;
}

Another alternative (in certain conditions) could be to remove the border from the child (.elem), keep the border on the parent (#tool-panel), and:

#tool-panel {
  background-color: black;
}
.elem {
  margin-bottom: 1px;
}
.elem:last-child {
  margin-bottom: 0;
}

And just for good measure, a third approach could be to set:

.elem {
  margin: 0 -1px 0 -1px;
}