- ベストアンサー
画像の下の余白
下記のソースの場合、画像の下に余白が出来てしまうのですが、どうすれば画像の下と『<div class=bar>画像</div>』の上の余白を削除してくっ付けるられるのでしょうか？ 【index.html】 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=shift_jis"> <title>例題</title> <link rel="stylesheet" type="text/css" href="design.css" media="all"> </head> <body> <img src="gazou.jpg" class="name" width="1024" height="768"> <div class="bar">画像</div> </body> </html> 【design.css】 .bar{ background-color: #ff0000; }
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
私も同じ現象で悩んだことがあります。 解決策としては、 <img src="gazou.jpg" class="name" width="1024" height="768"> <div class="bar">画像</div> のソースを <img src="gazou.jpg" class="name" width="1024" height="768"><div class="bar">画像</div> とすれば解決できます。 imgタグとdivタグの間にソースレベルで改行が入ってしまう為に起こってしまう様です。
その他の回答 (2)
<img src="gazou.jpg" class="name" width="1024" height="768"><!-- --><div class="bar">画像</div> 私は、こんな感じで！ <!-- -->コメントで続けています。
- nekonyanko
- ベストアンサー率25% (146/573)
FireFoxでは余白がなく表示されるのでＩＥの問題？のような気がします。
お礼
助かります！ 皆さんありがとうございました。