如何在多個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>