[roger64]

Originally Posted by dgatwood

IIRC, if you don't set display to block (I'm assuming you're using a span, because you really shouldn't be using a div inside a paragraph), most renderers will ignore the top margin. Depending on the font, you may also need to set the line-height to at least 1.2, and you may want to set the box's height property to avoid wasting too much space below the drop cap on whitespace.

There are lots of other fun surprises if you aren't careful. Take a look at the CSS section of the EPUB article on the wiki site. Most of those quirks are reader-specific bugs that I discovered while doing drop caps.

I am afraid I did not find the CSS section of the EPUB article. Could you link to it?

The extreme sensitivity of Kobo to font-family names does not help. It seems they do request.
- the full font-family name (no abbreviation, single quotes) - not the postscript name -.
- a suffix at least for Regular, Italic, Bold and BoldItalic.

I have four embedded fonts: three display perfectly ('Linux Libertine-Regular', 'Linux Libertine-Italic','Linux Libertine OC') the third one being for small-caps. The fourth one: 'Linux Libertine Display-Regular' still has some quirks which defeat the purpose of the dropcaps.

This is my way for dropcaps. I do use a block (first span) in which I insert the letter (second span).

Spoiler:

.let1{
display : block;
float : left;
margin-top : -0.2em;
margin-left : 1.30em;
margin-right : 0.20em;
height : 2.0em;
}

.let2{
font-family:'Linux Libertine Display-Regular';
font-size : 3.2em;
line-height : 0.9em;
}

/*Réglage Lettrine J et Q (let 2 vers let4) */

.let4{
font-family:'Linux Libertine Display-Regular';
font-size : 2.9em;
line-height : 0.9em;
}

body {
line-height: 1.30;
}

<p class="let"><span class="let1"><span class="let2">S</span></span>

For the time being I do not yet get a perfect display of the dropcaps on EPUBs with the Kobo Glo and this precise embedded font. Some letters are nearly OK (S, E, I), some others are badly displayed (L, D..)...