line-height指定で発生する余白の対応

質問

line-heightを指定した際に発生する要素の上下の余白（文頭の行の上と文末の行の下）についてご相談です。
行間を指定する上で仕様上仕方のない空白なので、普段は

（1）多少の余白なので無視する
（2）次に続く要素が背景色or画像orボーダーありの要素以外のときは別途CSSでマージンを調整する
（3）ブロック要素の内側に<span>でネガティブマージンを指定して上下のline-heightを相殺する

のいずれかで対応しています。

（1）はともかく、（2）は汎用性がいまいちで、構成が変わって画像が間にはいったりしたらクラスをいちいち付け替えなくてはなりません。
（3）に関しては文書構造上余計なタグが入ってしまいますし、ネガティブマージンの多用でかなりカオスなことになってしまいます…

かといってデザインに気を使ったサイトやline-heightをかなり広めに指定したいときなど、
見過ごせないときもあるなあと思い、皆様がどう対応しているのかご教授いただければと思います。

よろしくお願いいたします。

回答No.2

tracer

:beforeや:afterを解釈できる比較的新しいブラウザであれば、一応こんな感じで回避できますね。今、思いついただけの方法なので、ベストプラクティスかどうかは謎ですがw

p{
　background: #f00;
　line-height: 3;
　font-size:15px;
}
p:before , p:after{
　display:block;
　content:"";
　line-height:1;
　height:1px;
　width:1px;
}
p:before{
　margin-bottom:-15px;
}
p:after{
　margin-top:-15px;
}

:beforeや:afterを解釈できないブラウザに関しては、javascriptで対応させる感じかな。