Drop caps without float hacks
The old way used float, a large font-size, and manual line-height and margin, and it broke across browsers. initial-letter gives you a real drop cap in one property.
2 float: left;
3 font-size: 3em;
4 line-height: 1;
5 margin-right: 8px;
6}
7
8/* Line wrapping and alignment often broke. */
2 initial-letter: 3;
3}
4
5/* 3 = sink 3 lines; browser handles size and wrap. */
One property
No float, no guessing font-size or line-height. You say how many lines the letter sinks and the browser does the rest.
Stable layout
Initial-letter is designed for drop caps. Wrapping and alignment stay consistent across browsers.
Optional raise
initial-letter: 3 2 means sink 3 lines and raise 2. You get control without fragile hacks.
How it works
The old way: style ::first-letter with float: left, a big font-size (e.g. 3em), line-height: 1, and margin-right to clear the text. It kind of worked but line wrapping and alignment varied by browser and font, and you had to tweak by eye.
The modern way: set initial-letter: 3 (or another number). The number is how many lines the letter sinks into. The browser sizes and positions it correctly. You can use two values, e.g. 3 2, for sink and raise. One property, predictable result.