枠線と中身との間隔を調整したい
枠線とその中身との間隔がちょっと詰まっていますから、ここを調整したいですね。そこで、次のプロパティを使用します。
- padding : 枠線と中身の間隔
パディング（padding）とは、枠線から中身までの間隔を指定するプロパティです。
百聞は一見にしかずということで、先ほどの例にさらに加えてみましょう。
<p style="border-width: 5px; border-color: green; border-style: solid;" background-color: #ccffcc; color: #0000cc; padding: 0.5em;> 枠線と中身との間隔が結構開いたことがお分かり…… </p>
枠線と中身との間隔が結構開いたことがお分かりでしょう。（0.5文字分の間隔が開いています。）
いかがでしょうか。 上記の例では、パディングに「 0.5em 」と指定しましたから、周囲に0.5文字分の余白ができています。
先ほどまでの詰まった感じよりも、ずいぶんと見やすくなりましたね。
もちろん、先の枠線の太さと同じように、単位「px」を使って指定することもできます。 「padding: 12px;」と記述すれば、周囲に12ピクセルの余白が確保されます。
ここでは、枠線と中身（この文章）との間隔が、12ピクセルになっています。
枠そのものの幅や高さを指定したい
さて、これまでは「枠の幅」や「枠の高さ」は指定しませんでした。何も指定しなければ、中身に応じて自動的に決定（※）されます。デザインによっては、枠の大きさを指定したい場合もあるでしょう。その場合は、次のプロパティを使用します。
※ここでは、段落を表す p要素（<p>～</p>）に対してスタイルを適用していますので、横幅は「行全体」になります。 高さは、内容量に応じて必要なだけ確保されます。
- width : 横幅
- height : 高さ
これを先ほどの例にさらに加えてみましょう。
<p style="border-width: 5px; border-color: green; border-style: solid;" background-color: #ccffcc; color: #0000cc; padding: 0.5em; width: 340px;> 枠の横幅が 340ピクセルになっていることが…… </p>
枠の横幅が 340ピクセルになっていることがお分かりいただけると思います。 中身の文章は、自動的に適宜改行されて複数行になります。
上記の例では、枠の横幅を「340ピクセル」（340px）に指定しています。 これで、どれだけ中身の文章が多くても、アクセス者のウインドウサイズが何であっても、横幅は340ピクセルに固定されます。
横幅の指定は、「 width: 75%; 」というような割合での指定も可能です。 この場合は、枠が描画されうる領域の75％（横幅のみ）を枠で占有するこになります。 この場合だと、「枠の横幅」が「ウインドウの横幅」よりも大きくなって、ウインドウに横スクロールバーがでてしまう事態を回避できます。
枠の横幅が ウインドウの横幅に対して 75％の幅になっていることがお分かりいただけると思います。 ウインドウサイズを変化させて、枠の横幅も変化することを確認してみて下さい。
なお、ここでの横幅は「枠線も含めた幅」です。「中身（内側）の幅」ではありません。ピクセル単位で細かくデザインしたい場合には特に注意して下さい。
段落だけ？
今までは、「段落」を表す p要素（<p>～</p>）に対してスタイルシートを適用してきました。他にも、「文章中の特定の単語だけ」に適用することも可能です。
