CSS首字母格式創建第一和第二線之間的差距

Question

當我使用的CSS ::第一個字母增加下列方式字體：

p:first-letter { 
    font-size: 400%; 
} 

它創建第一之間的差距和該段的第二行。你能否建議一個解決方案來避免這種差距。

Answer 1

你的問題是位於line-height。如果你想知道行高度實際上是如何工作的，我建議你閱讀這篇文章：http://joshnh.com/weblog/how-does-line-height-actually-work

p { 
 
    padding: 15px; 
 
} 
 
p:first-letter { 
 
    font-size: 400%; 
 
    line-height: 0; 
 
    padding-top: 20px; 
 
}

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Answer 2

這是因爲它們是由它們的基線對齊，用大字體大小的下行部分是多更高。

治療大的第一字母的好方法是將它們視爲浮動元件（即內文本塊），並調整它們的高度，以所使用的常規字體和字體大小，這樣的：

p:first-letter { 
 
    font-size: 500%; 
 
    float:left; 
 
}

<p class="first-letter">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>