![](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のolやulなどlistにtitleや...
-
複数のボタンを等間隔に、かつ...
-
div要素が重なってします
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
ヘッダーを左右に二分割する方...
-
h1のテキストサイズよりh2の方...
-
iframeを使わずに上下50%ずつに...
-
フッター固定で余白ができます
-
CSSで画像を下に配置
-
<div id="container">の使いか...
-
hタグの右横に画像を表示
-
<div>テキスト</div>
-
携帯サイト、ナノでのタグ編集...
-
HTML5を学習する上での最適な環...
-
レイアウトが崩れる・・・
-
ヘッダーとフッターだけ背景を...
-
XHTMLでループ処理のやり方
-
1サイト内にHTML5とXHTMLが混在...
-
float:leftを使用して全体を中...
マンスリーランキングこのカテゴリの人気マンスリー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
おすすめ情報