如何減少元素邊框的長度？

我的問題是非常短的和明確的。我想比這更短的分隔符：如何減少元素邊框的長度？

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

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

這是預期輸出：

正如你看到的，我已經設置了height: 3px，但仍然是span的高度大於3px。我怎樣才能縮短邊界？

來源

2016-08-19 Martin AJ

你是不是故意問「我怎樣才能減少元素的高度」？ – Aziz

@Aziz是的..抱歉，我不太熟悉英語 –

設置內聯元素的高度將不起作用。添加display: inline-block;爲它尊重height: 3px;

來源

2016-08-19 20:38:30 Pat

[好]（https://jsfiddle.net/xssmmqk1/1/）.. upvote。但在這種情況下，該邊界位於元素的頂部，我怎樣才能將它放置在中心的垂直位置？ –

要中心：'line-height：3px;' – dNitro

好，謝謝。 –

我想你試圖使邊框的高度減少，不一定減少span標記（其中包含文本）的高度。

在這種情況下，您可以簡單地使用僞元素（如::before），您可以使用CSS控制更多元素。

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

注意行是如何3px的高。

來源

2016-08-19 20:41:00 Aziz

好的，謝謝.. upote –

作爲一個說明，*僞*選擇器不適用於像IE7這樣的老式瀏覽器。 –

噢，我的哀悼 – Aziz

保持簡單。只需使用| HTML中的字符。

Demo。

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

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

來源

2016-08-19 20:41:15 pmahomme

'|'字符的高度比預期的要大。 –

如何減少元素邊框的長度？

回答

相關問題