![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
line-heightを指定した際に発生する要素の上下の余白(文頭の行の上と文末の行の下)についてご相談です。
行間を指定する上で仕様上仕方のない空白なので、普段は
(1)多少の余白なので無視する
(2)次に続く要素が背景色or画像orボーダーありの要素以外のときは別途CSSでマージンを調整する
(3)ブロック要素の内側に<span>でネガティブマージンを指定して上下のline-heightを相殺する
のいずれかで対応しています。
(1)はともかく、(2)は汎用性がいまいちで、構成が変わって画像が間にはいったりしたらクラスをいちいち付け替えなくてはなりません。
(3)に関しては文書構造上余計なタグが入ってしまいますし、ネガティブマージンの多用でかなりカオスなことになってしまいます…
かといってデザインに気を使ったサイトやline-heightをかなり広めに指定したいときなど、
見過ごせないときもあるなあと思い、皆様がどう対応しているのかご教授いただければと思います。
よろしくお願いいたします。
![「line-height指定で発生する余白」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/6/1303081_5497ce5788713/M.jpg)
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
:beforeや:afterを解釈できる比較的新しいブラウザであれば、一応こんな感じで回避できますね。
今、思いついただけの方法なので、ベストプラクティスかどうかは謎ですがwp{
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
- 回答日時:
基本的には、(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-html4 … )』ためのものです。その上でその文書構造を利用してスタイルシートを書くのです。
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 … )]より
訳すと
『著者は、他に適切な要素がないときの、最後の手段として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などを自在に調整する。
そうすると、
汎用性とか、構成が変わって画像が間にはいったりしたとか、文書構造上余計なタグとかの悩みはそもそも存在しなくなるのでは?
![「line-height指定で発生する余白」の回答画像1](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/5/650963_5497f0f0d4362/M.jpg)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- Word(ワード) ワード。長い四角の中に文字を体裁良く入力するには。 2 2022/09/24 14:19
- Visual Basic(VBA) 【VBA】写真の貼り付けコードがうまく機能しません。 5 2022/09/01 18:43
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
- 片思い・告白 【至急お願いします!】これを脈アリと思ってもいいのでしょうか? 7 2022/12/29 06:00
- C言語・C++・C# C言語初心者 構造体 課題について 1 2023/03/10 19:30
- 美術・アート デザインについての考察。 なぜ人の脳は、規則正しく連続した要素を「背景」と認識するのか、実験してみま 2 2022/04/11 21:08
- HTML・CSS 依頼したWEBサイトの修正に追加料金がかかる 10 2022/10/24 09:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
min-heightとheightの違いについて
-
<div>テキスト</div>
-
画面を拡大すると横幅が切れる
-
CSS でテキストの点滅をするに...
-
1時間30分を簡単に表したいで...
-
cssにてボタン位置を下揃えしたい
-
htmlのolやulなどlistにtitleや...
-
ヘッダーとフッターだけ背景を...
-
SSIを利用してCSSレイアウトを...
-
hタグの右横に画像を表示
-
htmlの見出しタグ(<h1>)の次...
-
html5でheaderの中にnav
-
htmlの文字が縦書きになる
-
<table>の高さ固定。情報増加時...
-
footer を横幅いっぱいに広げる...
-
HTML要素のid/class名の長さに...
-
リストマーカーをボックス内に...
-
【ヒトの神秘】美男美女から何...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
要素間、要素内に隙間が空く
-
画面を縮小するとカラムが落ち...
-
h1のテキストサイズよりh2の方...
-
divの中に外部のHTMLを埋め込む
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
hタグの右横に画像を表示
-
グリッドレイアウトで"auto-fit...
-
セクションをdivで囲むと見出し...
-
開閉式の隠し要素が一瞬表示さ...
-
html5でheaderの中にnav
おすすめ情報