- ベストアンサー
line-heightと画像
例えば、 <div style="line-height:200%"> 一行目<br> 二行目<br> 三行目<br> 四行目 </div> とすれば、それぞれの行間（行の前後の余白）は通常の200%となりますよね。 このとき文章内に（文字と同じくらいの高さの）画像を入れると、IEではその行前後に行間が開かないようなのですが、どうすればよいのでしょうか。 Netscapeでは文章と同じように行間が開いて表示されるのですが。 <div style="line-height:200%"> 一行目<br> <img src="gazou.gif">二行目<br> <img src="gazou.gif">三行目<br> 四行目 </div> のようにすると、二行目と三行目に行間が開きません。 （二行目と三行目のそれぞれの行の前後に余白がありません。） ちなみに、DTDは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ですが、システム識別子をつけても同様でした。 ※準拠にしたらtd,th内にも適用されました。余談ですが。 IEで、画像を含んだ行にline-heightを適用させるにはどうすればよいのでしょうか。 誤った表現をしていたら申し訳ありません。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
テキスト以外のものが含まれるブロックでline-heightを使うと環境によっては不具合が出というようなコトをどこかで読んだ気がします。 IEではver.5から layout-grid が実装されているので、コレを使ってみてはどうでしょう？ <div style="line-height: 2em;layout-grid-line: 2em;"> 一行目<br> <img src="gazou.gif" width="50" height="15">二行目<br> <img src="gazou.gif" width="50" height="15">三行目<br> 四行目 </div>
その他の回答 (1)
- partita
- ベストアンサー率29% (125/427)
img {margin:5px 0;} のように、imgだけ別に設定するのはどうでしょうか。
お礼
ご回答ありがとうございます。 しかし、imgのマージンで指定してしまうとテキストと合わなかったりで不都合が生じてしまうのです…。 各々の行をブロック要素で囲ってしまって、そのブロックに対して上下マージンをつければ多分理想通りの表示になるのですが、行をそれぞれ囲うのも…。 line-heightのような指定が画像を含む行に対しても有効になるような方法はどうなのでしょう…。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
layout-gridなんてプロパティを気にも留めていませんでした。 先ほど試したところ、応用して利用したら理想の表示に近づきましたｗ でも、このプロパティの指定は何か難しいですね。 プロパティ値の基準が分からないので…。％指定とかどうなっているのか…。 このプロパティを併用することでIEでも同様の表示ができそうなので応用していきたいと思います。 回答ありがとうございました☆ もう少ししたら締め切りたいと思います。