例えば、一行目二行目三行目四行目とすれば、それぞれの行間（行の前後の余白）は通常の200%となりますよね。このとき文章内に（文字と同じくらいの高さの）画像を入れると、IEではその行前後に行間が開かないようなのですが、どうすればよいのでしょうか。 Netscapeでは文章と同じように行間が開いて表示されるのですが。一行目二行目三行目四行目のようにすると、二行目と三行目に行間が開きません。（二行目と三行目のそれぞれの行の前後に余白がありません。）ちなみに、DTDはですが、システム識別子をつけても同様でした。 ※準拠にしたらtd,th内にも適用されました。余談ですが。 IEで、画像を含んだ行にline-heightを適用させるにはどうすればよいのでしょうか。誤った表現をしていたら申し訳ありません。

line-heightと画像

解決済

質問者：quads
質問日時：2005/04/17 04:57
回答数：2件

例えば、
<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件)

No.2ベストアンサー

回答者： digo
回答日時：2005/04/18 07:05

テキスト以外のものが含まれるブロックで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>

- 0
- 件

通報する

この回答へのお礼

layout-gridなんてプロパティを気にも留めていませんでした。
先ほど試したところ、応用して利用したら理想の表示に近づきましたｗ

でも、このプロパティの指定は何か難しいですね。
プロパティ値の基準が分からないので…。％指定とかどうなっているのか…。

このプロパティを併用することでIEでも同様の表示ができそうなので応用していきたいと思います。
回答ありがとうございました☆
もう少ししたら締め切りたいと思います。

通報する

お礼日時：2005/04/18 16:44

No.1

回答者： partita
回答日時：2005/04/17 21:45

img {margin:5px 0;}

のように、imgだけ別に設定するのはどうでしょうか。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
しかし、imgのマージンで指定してしまうとテキストと合わなかったりで不都合が生じてしまうのです…。

各々の行をブロック要素で囲ってしまって、そのブロックに対して上下マージンをつければ多分理想通りの表示になるのですが、行をそれぞれ囲うのも…。
line-heightのような指定が画像を含む行に対しても有効になるような方法はどうなのでしょう…。

通報する

お礼日時：2005/04/18 00:06

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！