border-top Lücke entfernen, wenn gesetzt border-right

Question

hier ist ein Beispiel:

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

Ich mag eine Bar zwischen zwei Kind div-Tag erstellen, so dass ich wie oben CSS verwenden. Aber es schafft eine Lücke zwischen Kind und Elternteil. Wie kann ich es entfernen?

Answer 1

Fügen Sie einfach Polster nach unten und oben auf dem Inline-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

Nur display:inline entfernen und display:inline-block hinzufügen. Es wird dein Problem lösen.

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