firs-letter を使ったドロップキャップはマークアップ時の手間が少ない分、何かと制限が多くていまひとつ思い通りにできない場合があります。そこで、一文字目をspanで囲ってもっと自由な表現が可能なドロップキャップを作ってみましょう。

.drop-box span {
      font-size: 3em;
      float: left;
      margin: 5px;
      padding-top: 15px;
      color: #600;
}

<div class="drop-box">
<p><span>ペ</span>ージランクがどのように決定されているかというと「外部からのリンク」の数です。沢山のページからリンクをもらえればそれだけページランクは高くなっていきます。これは選挙みたいなもので、有権者（ホームページ管理者）から投票してもらっていると思ってもらうと分かりやすいかと思います。また、リンクの中でも同じ物を取り扱っているページや、その物事に関係のあるページなどからのリンクはより強力な投票として取り扱われます。更に、ページランクの高いページからのリンクはもっと強力な投票として扱われます。これは、「信頼できる人からの投票」と考えてもらえると分かりやすいかと思います。例えば、口の軽い人間（リンクファームなど）から「この人は信頼できる人です」といくら説明されても信用できないのと同じことです。逆にみんなが信頼している人（ページランクの高いページ）の一言は普通の人の言葉より心に響くと言った感じですね。このことからも分かるように、相互リンクページやリンクファームなどからのリンクはマイナスとまでは言わないまでもあまり意味のないリンクだといえます。</p>
</div>

この場合、一文字目をfloatさせているのでp要素の中のテキストが少ない場合はfloatを解除するようにしましょう。