CODEWITHSUNDEEP
htmlcss
Sayluv
Sayluv

Reputation: 3

Padding-left for drop cap

Image of drop cap that is offset

How can I set the padding-left as I have below but without doing it in a paragraph. my firstcharacter class creates a drop cap but the left padding is off so I fixed that with the 5px left padding. Only problem is that it pushes the text down an entire line as a new paragraph.

<span class="firstcharacter">H</span><p style="padding-left:     
5px;">eadquartered in Seattle Washingon, yada yada.</p>

Screenshot added. The drop cap is still a bit off to the right. This is on Squarespace.com and I am not sure if something else there is messing this up. I tried the above and had the same issue and now I am back to this: 

p.drop-cap:first-letter {
color: #903;
float: left;
font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
font-size: 75px;
line-height: 60px;
padding-top: 8px;
padding-right: 6px;
padding-left: 0px;

}

Upvotes: 0

Views: 59

Answers (1)

Blazemonger
Blazemonger

Reputation: 92913

Try applying :first-letter styles to the paragraph instead. You can float the first letter so it stays inline with the rest of the paragraph.

p.drop-cap:first-letter {
font-size: 60px;
float:left;
}
<p class="drop-cap">Headquartered in Seattle Washingon, yada yada. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>

Upvotes: 1

Related Questions