CSS 첫 편지 서식 나는 다음과 같은 방법으로 글꼴을 높이기 위해 CSS를 <strong>:: 첫 번째 문자</strong>를 사용하는 경우

Question

제 1 및 제 2 라인 사이의 간격을 생성 그리고 단락의 두 번째 줄. 이 격차를 피하기위한 해결책을 제안 해 주시겠습니까?

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>