Wie kann ich die Länge der Elementgrenze reduzieren?

Question

Meine Frage ist wirklich kurz und klar .. Ich mag einen kürzeren Separator als das:

.myclass{ 
 
    border-left: 1px solid; 
 
    margin-left: 4px; 
 
    padding-left: 4px; 
 
    height: 3px; 
 
}

<span>Age</span><span class="myclass">21</span>

Dies wird voraussichtlich Ausgang:

Wie Sie sehen, Ich habe height: 3px gesetzt, aber immer noch ist die Höhe dieses span größer als 3px. Wie kann ich diese Grenze kürzer machen?

Answer 1

Das Festlegen der Höhe eines Inline-Elements hat keine Auswirkungen. In display: inline-block; für sie height: 3px;

Answer 2

zu respektieren Ich glaube, Sie versuchen, die Höhe der Grenze weniger zu machen, die nicht unbedingt die Höhe des span Tages zu reduzieren (der Text enthält).

In diesem Fall können Sie einfach ein Pseudo-Element (wie ::before) verwenden, das Sie mehr mit CSS steuern können.

.myclass::before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 3px; 
 
    width: 1px; 
 
    background: #000; 
 
    vertical-align: middle; 
 
    margin-right: 5px; 
 
}

<span>Age</span> <span class="myclass">21</span>

Beachten Sie, wie die Linie hoch ist 3px.

Answer 3

Halten Sie es einfach. Verwenden Sie einfach ein | Zeichen im HTML.

Demo.

<span>Age |</span> 
<span class="myclass">21</span> 

.myclass { 
    padding-left: 4px; 
    height: 3px; 
}