initial-letter
A drop cap the browser measures for you
Drop caps used to mean a float, a hand-guessed font size and a line-height that had to be re-tuned every time the copy changed. Two numbers replace all of it: how many lines tall, and how many lines down.
Caveatinitial-letter sizes and sinks the letter vertically and does nothing horizontally, so the text still runs flush against it until you add your own margin-right. Two numbers are also not one: initial-letter: 3 means three lines tall and sunk three, which drops the cap below the first line where you almost certainly wanted 3 2. It applies to ::first-letter in a block container and is ignored anywhere else, including on a flex item.
FallbackAn engine without it ignores the declaration and renders an ordinary first letter at whatever size and colour you also set, so the paragraph stays readable and merely loses its cap. That degrades better than the float version, which leaves a large letter jammed against the text when the line-height guess is wrong.
p::first-letter {
/* tall three lines, sunk two.
one number sinks it by its
own height, which is lower
than you meant */
initial-letter: 3 2;
/* vertical only — the gutter
is still your problem */
margin-right: 8px;
}Published