頂部

Question

這jsfiddle看起來是這樣的：

我希望它看起來像這樣（我創造了這個與MS油漆）...沖洗：

有什麼我可以添加到樣式來實現這一目標嗎？

div { 
    border: 1px solid blue; 
    font-size: 50px; // this number should be treated as arbitrary 
} 

Answer 1

一個選項是使用line-height。金額將取決於您使用的字體家族。好處是line-height可以直接依賴於字體大小，因此它可以是動態的。但是，它沒有單獨的垂直頂部和底部概念（它適用於兩者），因此您不會在文本下留下該空間。

div { 
 
    border: 1px solid blue; 
 
    font-size: 70px; 
 
    font-family: 'Times'; 
 
    line-height: 0.7; /* This will work for any font-size on 'Times'*/ 
 
}

<div>Hello</div>

你可以通過包裝與邊距的元素的文本模擬出底部空間。

div.outer { 
 
    border: 1px solid blue; 
 
    font-size: 70px; 
 
} 
 

 
div.inner { 
 
    font-family: 'Times'; 
 
    line-height: 0.7; 
 
    margin-bottom: 20px; 
 
}

<div class="outer"> 
 
    <div class="inner">Hello</div> 
 
</div>

Answer 2

另一種選擇是使用相對定位。此方法優於行高的優點是div大小不變。

div { 
 
    border:1px solid blue; 
 
    font-size: 64px; // works for arbitrary font sizes 
 
} 
 
span{ 
 
    position:relative; 
 
    top:-0.21em; 
 
}

<div> 
 
    <span>Hello</span> 
 
</div>

與線高，你可能需要調整 「-0.21em」 這取決於你的字體。 -0.21em對我來說很適合無襯線和襯線，但不能草寫。