如何在多个div周围放置边框

Question

我想在多个 div 周围设置边框，所以我试图在父 div 周围设置边框。 但是，这会导致子项和父项之间存在细微差距（其中一个子项将具有不同的背景颜色）。 有没有办法防止这种行为？

https://jsfiddle.net/fpcg2x07/8/

 .container { display: inline-flex; border: 1px solid black; } .child { padding: 0.5rem; } .child:first-child { background-color: red; }

 <div class="container"> <div class="child"> child1 </div> <div class="child"> child2 </div> </div>

谢谢！

Answer 1

原因还有待查明。 可能发生这种情况是因为 0.5rem 填充由于某种原因与浏览器缩放不同于 100% 的事实并不吻合。 这就是为什么px单位更好（？） 我应该在我的 CSS 中使用 px 还是 rem 值单位？ )

但这是一种解决方法（确实为孩子使用边框，但仅使用顶部和底部）。

 .container { display: inline-flex; border-left: 1px solid black; border-right: 1px solid black; } .child { padding: 0.5rem; border-top: 1px solid black; border-bottom: 1px solid black; } .child:first-child { background-color: red; }

 <div class="container"> <div class="child"> child1 </div> <div class="child"> child2 </div> </div>