设置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。但它在孩子和父母之间造成了差距。我怎么能删除它？

Answer 1

只需在内联div的底部和顶部添加填充

<强> HTML

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

<强> DEMO HERE

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;