ここのborder-right

Question

を設定する際のborder-topのギャップを削除例です。

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

私は上記のようなCSSを使用するように、2人の子のdivタグの間にバーを作成します。しかし、それは子供と親の間にギャップを作ります。どうすれば削除できますか？

Answer 1

ジャストジャストdisplay:inlineを削除し、display:inline-blockを追加するには、インラインdiv's

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

に下部と上部にパディングを追加します。あなたの問題を解決します。

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