使用vw時的文本填充字體大小

我使用vw根據瀏覽器打開的文本放大頁面，但填充大於預期值。我希望它完全位於頁面的頂部，幾乎沒有填充。（我試過padding:0px;沒有結果）。這裏有一個例子：使用vw時的文本填充字體大小

在HTML：

<heading>some text</heading>

在CSS：

heading{ 
    font-size:5vw; 
    padding:0px; 
    margin:0px; 
}

來源

2017-08-15 Dominique Abou Samah

做一些瀏覽器還添加填充物或保證金的身體？試試'body {padding：0;保證金：0; }' – wunth

爲了得到你想要的，你可以做以下的一個結果：

1 - 使用線路-高度。

<div>some text<br/>line 2</div> 

div { 
    font-size: 5vmax; 
    padding: 0px; 
    line-height: 0.75em; 
    background:lightgray 
} 

body { 
    margin: 0; 
}

https://jsfiddle.net/7sqdnvyh/2/

2 - 您可以添加切緣陰性破解它周圍。

<div>some text</div> 

div { 
    font-size:5vw; 
    margin-top:-15px; 
}

https://jsfiddle.net/7sqdnvyh/1/

來源

2017-08-15 22:30:17

這可能是由一個事實，即大多數字體（包括系統字體）沒有到頂部，每個字形的邊界框的底部完全延伸造成的。這意味着即使元素的高度爲1em，大寫字母也不會觸及元素的頂部。

爲了解決這個問題，你可以試試你的字體，看看你的字母的頂部和底部落在哪裏。對於每種字體，這可能是不同的，也取決於上行程度有多高。通常情況下，上行高度高於帽高。

對於Times New Roman字體，下面的行之有效的上限：

<span>Foobar</span> 

span { 
    background: #ddd; 
    display: inline-block; 
    line-height: .70em; 
    vertical-align: text-top; 
}

改變這裏的線是線的高度。玩這個應該會給你你需要的結果。例如，.70仍然將「O」剪輯一點。

我建議使字體比需要的大得多，在行高中撥號，然後縮小回來。

span { 
 
    background: #ddd; 
 
    display: inline-block; 
 
    line-height: .70em; 
 
    vertical-align: text-top; 
 
} 
 

 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font: serif; 
 
    font-size: 20vw; 
 
}

<span>FOOBAR</span>

來源

2017-08-15 22:50:38 Hans

使用vw時的文本填充字體大小

回答

相關問題