如何刪除文本下方的空白？

死簡單的問題：

HTML：

<div>Hello World</div>

CSS：

div { 
    background-color: rgba(255, 0, 0, 0.3); 
    font-size: 70px; 
}

結果：

enter image description here

什麼是最簡單的（不需要黑客）方法來刪除文本下面的空白，即定位文本，使其基線位於元素的底部？

期望的結果：

enter image description here

您是否嘗試將邊距和填充設置爲0？做一個絕對的定位也應該起作用。 – 2014-10-02 11:53:42

在你的例子中，你會期望g字符的底部去哪裏？粉紅色之外？例如：[http://www.cssdesk.com/96z4x](http://www.cssdesk.com/96z4x） – Jeroen 2014-10-02 11:55:26

是的，外面的粉紅色！ – 2014-10-02 11:57:53

改變瓦萊斯爲line-height和padding-top

div { 
    background-color: rgba(255, 0, 0, 0.3); 
    font-size: 70px; 
    line-height: 48px; 
    padding-top: 8px; 
}

div { 
 
    background-color: rgba(255, 0, 0, 0.3); 
 
    font-size: 70px; 
 
    line-height: 48px; 
 
    padding-top: 8px; 
 
}

<div>Hello - g - World</div>

OR（類似@米哈爾的答案）...

你可以高度增加比字體大小如少DIV：

div { 
 
    background-color: rgba(255, 0, 0, 0.3); 
 
    font-size: 70px; 
 
    height: 64px; 
 
}

<div>Hello - g - World</div>

2014-10-02 12:01:05 Danield

請記住，不同字體之間的行高會有所不同，例如，此示例在[Verdana]（http://jsfiddle.net/trf6m9ta/）中關閉。 – misterManSam 2014-10-02 12:04:49

@misterManSam你必須相應地設置'line-height' - 這取決於你的字體系列。 – Danield 2014-10-02 12:11:57

是的，這是一個好方法。只是一件好事情要注意:) – misterManSam 2014-10-02 12:14:07

它看起來是像 'J' '下' 封留出空間。您可以設置DIV的高度，但這就像是它看起來像：

div { 
    background-color: rgba(255, 0, 0, 0.3); 
    font-size: 70px; 
    vertical-align: bottom; 
    height: 70px 
}

2014-10-02 11:58:05

回答