css - 设置 border-right 时删除 border-top gap

Question

这是一个例子:

<div style="border: 2px solid black">
    <div style="border-right: 3px solid black; display: inline">div1</div>
    <div style="border-right: 3px solid black; display: inline">div1</div>
</div>

我想在两个子 div 标签之间创建一个栏，所以我像上面一样使用 css。但它在 child 和 parent 之间造成了鸿沟。我怎样才能删除它？

Answer 1

只需删除 display:inline 并添加 display:inline-block。它会解决您的问题。

<div style="border: 2px solid black">
    <div style="border-right: 3px solid black; display: inline-block">div1</div>
    <div style="border-right: 3px solid black; display: inline-block">div1</div>
</div>