-
ID:nUnSSq さんの質問

line-heightについて教えてくださいお願いします！もうかれこれ2時間くらい悩んでます。。。

<p><img src="sample.jpg"><p>
p{line-height: 2;font-size: 14px;}

こういうHTML/CSSを指定していて、sample.jpgの高さが28px以下の時、
pの領域が画像からはみ出ますよね？
なんで下記のソニーのページの場合、はみ出さないんでしょうか？？？？

//store.sony.jp/Product/Tablet/Xperiatablet/index.html

「Xperia(TM)Tabletから選ぶ」のところの「詳細を見る」のボタンです。
この画像を囲っているpにline-height: 100px;を設定しても（Firebugでやってみました）はみ出ないのはなぜでしょうか？？？お願いです、教えてください！！

みんなの回答 6 件

ID:XD.q3c さんの回答

line-height･････行の高さを指定する
例のp･････文字入ってない
そうなると理解はできませんか？
ID:nUnSSq

そう思ったんですが、仮に自分で下記の様にすごくシンプルな形でやってみると、pの高さが画像よりも大きい31pxと表示されるんです。（画像は153×22です）

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
body {
font-size: 14px;
line-height: 2;
}
</style>
</head>
<body>
<p><a href=""><img src="//store.sony.jp/Product/Tablet/Xperiatablet/Images/2012/bt_detail.gif"></a></p>
</body>
</html>

ID:nUnSSq

↑は投稿時にタグが一部自動で削除？されるぽいですが実際は構文エラーはありません。

ID:nUnSSq さんの回答

すみません...しつこいようですが、もうひとつ例です。同じソニーのページのフッターにある「会社情報」「ご利用条件」などのメニューの部分は自分の予測するような動きになります。

<div class="footerInner">
<ul class="clearfix">
<li class="company"><a href="//www.sony.jp/CorporateCruise/SMOJ-info/?s_pid=store_gf_corporate"><img src="/Resources/Images/Footer/201010/bt_company.gif" alt="会社情報" height="11" width="47"></a></li>
.......

上記のliタグに対してline-height: 50px;を設定すると、liの高さがちゃんと50pxになります。

でもコピーライトの部分
<p class="copy">
<a href="//www.sony.jp/copyright/?s_pid=store_gf_copyright">
<img width="422" height="9" alt="Copyright 2015 Sony Marketing(Japan) Inc. Information on the site is for the Japan domestic market only" src="/Resources/Images/Footer/footer_copyright_2015.gif">
</a>
</p>
ここはやっぱりpにline-heightを設定しても反映されません。

どうして挙動が違うのか、両者の違いを教えてください...
ID:bwpDqA さんの回答

margin padding は？
ID:nUnSSq

効くかどうかという意味でしょうか？もしそうなら、どっちも効いてます。

ID:JD8yNE さんの回答

画像のとなりにテキスト置くとline-height効くようになるね。
CSS切っても変わらなかったから、HTMLのバージョンの差異かな～。
バージョン変えて試してみた？
html5のサイトで試したらp・a・img（テキストなし）の構造でもline-height効くけど、件のサイトのHTMLバージョンだとp・a・imgの時のテキストの有無でブラウザの挙動違うんじゃない？
ID:nUnSSq

今回の件は、画像の隣にはテキストはないのですが、HTMLバージョンの差異というのがビンゴな気がします！！
昨日お伝えした
//store.sony.jp/Product/Tablet/Xperiatablet/index.html
は、XHTML1.0でline-heightが効かないんですが、
同じサイト内の下層ページの
//store.sony.jp/Special/Tablet/Xperiatablet/Z3/index.html
は、HTML5で書かれててline-heightが効きます！！

HTMLバージョンで挙動が違うんですか！？！？
知りませんでした...びっくりです！！

ID:KGXhay

コメ主です。
いや、自分も意識はしたことなかったから消去法でそうなのかなって。
違うと思うって言ってる人も居るし、結局なんなんでしょうねｗ

ID:nUnSSq

なんなんでしょうね...ほんと気になります(><)でもこんなに明らかに差が出てるのに誰も気づかないわけないし、全然情報がないし、本当は違うのかなと思ったり、、すっきりしないです～！

ID:v3zEBr さんの回答

<li>タグはデフォルトでdisplay:list-item;、<p>タグはデフォルトでdisplay:block;この辺が関係しているんじゃないかな。
<p>タグにdisplay:list-item;を当てるとline-heightが反映される。
.
ただ<li>タグにdisplay:block;を当ててもline-heightが反映されたままなのがよくわからん。style属性で上書きしても変わらないから、おそらく初期値による影響かなー？
置換インライン要素とdisplay:inline-block;で、実際は挙動が異なるのと同じような現象だろうか。
ID:nUnSSq

><p>タグにdisplay:list-item;を当てるとline-heightが反映される。
やってみました、本当ですね！！！！displayにそんな値があるなんて知りませんでした。しかしその逆については謎ですね。。

liとpとで挙動が違うなら、何かが違うんだろうか...と諦めもつくんですが、上記にもコメントしましたが、昨晩、同じサイト内で同じコーディングをしていて挙動が違っているのを発見しました。

//store.sony.jp/Product/Tablet/Xperiatablet/index.html
は、XHTML1.0でline-heightが効かないんですが、
同じサイト内の下層ページの
//store.sony.jp/Special/Tablet/Xperiatablet/Z3/index.html
は、HTML5で書かれててline-heightが効きます！！

上の方が言われているとおり、HTMLバージョンによる差異なのでしょうか？？

ID:v3zEBr

時間ができたから実際にコーディングして調べてみた。
結論から言うと、HTML宣言による差異。
.
■HTML4.01、XHTML1.0
上記はブロックレベル要素(display:block;)に置換インライン要素単体だと、line-heightが効かない。
.
■HTML5
ブロックレベル要素に置換インライン要素単体でも、line-heightが有効。


  • 恐らくこんな感じでブロックレベル要素の仕様が違う。ちなみにリストアイテム要素(display:list-item;)はどっちでもline-heightが有効。
    .
    HTML5からはコンテンツモデルが導入されたり、セクショニング関連が実装されて仕様が変わりまくってるから、以前までHTMLとは完全に別物として捉えておいたほうが良さげ。
    長いことコーディングしてるけど、今まで知らなかったから勉強になった。
ID:nUnSSq

試していただいてありがとうございます！！！！確信に変わって良かったです！レスポンシブ対応をすることが増えてから、line-heightがなんかおかしい...って思うようになって、今までずっと気になってたんですが、なかなか時間が割けず。本当に、勉強になりました！

ID:bE/Q.5

1コ上のコメ主です。
参考になりました！検証ありがとうございます！
レスポンシブ対応大変ですよねorz

ID:nUnSSq さんの回答

自分で作った一番シンプルな形のページでHTMLバージョンを変えてやってみました。そしたら、HTML5だとline-heightが反映されるけど、XHTMLだと反映されませんでした！！これが結論ということでよさそうでしょうか？？

こんなことも知らずに今までコーディングしてたなんて、、、ただただびっくりです...
ID:i7etos

ちがうと思う

ID:nUnSSq

え！違うんですか！どういうことか教えてください...

最終更新日:2015-02-24 (8,318 views)

関連するトピックス

ページ上部に戻る