2006年6月 9日(金) 13時28分09秒 [Web関連]

blockquote要素の余白を調節したいとき

引用を表現するblockquoteという要素があります。まとまった量の引用によく使われます。文法的には、blockquote要素の直下には文章は書けないので、まずはp要素とか、文章を直接含められるブロックレベル要素を書く必要があります。例えば、次のような感じで。

ただ、このように書くと、装飾が面倒くさいんですよね。^^;
代表的なブラウザでは、blockquote要素の上下（前後）には、空行を1つ挿入します。そして、p要素の上下にも、やはり空行を1つ挿入します。

（※連続する空行は1つにまとめられるので、引用の上下（前後）に空行が2行分挿入されることはない。）

で、引用ブロックの上下の余白を少し縮めたい場合、blockquote要素に対してスタイルシートのmarginプロパティで短めの余白量を指定しても、上記のHTMLソースの場合は、意味がありません。

なぜなら、blockquote要素の余白量が減っても、その内側にあるp要素の余白量が有効なので、結局、1行分の空行は空いちゃうからです。

だから、引用文の上下の余白量を調整したい場合は、blockquote要素そのものに対する余白量と同時に、blockquote要素の中に含まれるp要素に対する余白量も指定する必要があります。これが、ちょっと面倒ですね。

たぶん、次のように、p要素の余白量をゼロに設定して、外側のblockquote要素の余白量を好きなように調節するのがいいような気がします。

イマイチ、スマートじゃない気がするんだけど、こんなもんかねえ。^^;;;