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で対応させる感じかな。

回答No.1

ORUKA1951

基本的には、(1)です。
永続スタイルシートには
html,body{margin:0;padding:0;font-size:14px;}
h1,h2,h3,h4,h5,h6,p{line-height:1.8em;margin:0;}
p{text-indent:1em;}
としています。

途中に画像が入ると言う想定がよくわかりませんが・・
例えば本文(section)中の段落はline-height:3em;だとして
div.section p{margin:0;line-height:3em;}
挿絵的要素(class="figure")があれば
div.section *.figure,div.section *.figure p{margin:-1em;line-height:1.8em;text-align:center;}

＞（2）は汎用性がいまいちで、構成が変わって画像が間にはいったりしたらクラスをいちいち付け替えなくてはなりません。
　これもわかりません。ひょっとしてデザインのためにclass名をいちいち付与しているのですか？もしそうでしたら、根本的に間違っています。

『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ためのものです。その上でその文書構造を利用してスタイルシートを書くのです。
　HTML5では、DIVは他に適当な要素がないときの最後の最後の手段としてDIVを使うと明記されましたが、元々HTML4.01の時代からそうでした。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )］より
訳すと
『著者は、他に適切な要素がないときの、最後の手段としてDIVを使用することが強く奨励される。DIVより適切な要素を使用することは、読者には良いアクセシビリティに、著者には容易な保守につながる。』

<div class="section">
　<h2>見出し</h2>
　<p>（1）はともかく、（2）は汎用性がいまいちで、構成が変わって画像が間にはいったりしたらクラスをいちいち付け替えなくてはなりません。</p>
　<p>3）に関しては文書構造上余計なタグが入ってしまいますし、</p>
　<p class="figure"><img src="./images/abc2.jpg" width="100" height="100" alt="扇風機"></p>
　<p>ネガティブマージンの多用でかなりカオスなことになってしまいます…</p>
　<div class="figure">
　　<p><img src="./images/abc2.jpg" width="100" height="100" alt="扇風機"></p>
　　<p class="figcaption">これは扇風機</p>
　</div>
</div>
に
先のスタイルシートで添付図のようになるはずです。firefox+firebug・・

　スタイルシートを読むと一目瞭然にわかるのは
div.section p{margin:0;line-height:3em;}
↑本文中の段落は行高さを3emにする。
div.section p.figure,div.section div.figure p{
↑本文中の挿絵中の段落は
margin:-1em;line-height:1.8em;text-align:center;
とHTMLを見なくてもどうデザインしているかわかりますし、デザインを変えるためにHTMLを弄る必要もありませんね。

★HTMLはデザインを一切考えずに、ひたすら将来の自分(あるいは第三者)のメンテナンス性、検索エンジンに理解できるよう、様々なユーザーエージェントに利用できるよう・・文書構造だけをマークアップする。
★スタイルシートはその文書構造を元にmarginやline-heightやpaddingなどを自在に調整する。

　そうすると、
汎用性とか、構成が変わって画像が間にはいったりしたとか、文書構造上余計なタグとかの悩みはそもそも存在しなくなるのでは？