画像と背景色の幅が合わない

2012/02/26 21:06

このQ&Aのポイント

画像のスペースの下に下線が表示される問題が発生しています。
画像と画像の間にスペースが空く現象が発生しています。
画像の下に空白ができる現象が発生しています。

noname#150172

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/02/27 09:06 回答No.2

<a href="アドレス"><img src="gazou1.jpg" width=190 height=50></a><a href="アドレス"><img src="gazou2.jpg" width=190 height=50></a> でソースコードの視認性のために改行しても、空白類は消えます。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからここで、ソース文書中で語間に空白類が複数連なっている場合、PRE要素を除いて、レンダリング結果の語間スペース調整は全く異なるものになるという点に注意されたい。特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。これは、lang属性やHTTP "Content-Language"ヘッダフィールド([RFC2616]の14.12参照)、ユーザの設定、等による言語情報が存在しない場合であっても、可能かつ必要な動作である。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )］より　なお、<nobr>はHTML4.01以降は存在しない要素です。 ※Index of the HTML 4 Elements ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/elements.html ) 　align="center" は、divにはありません。 ※Index of the HTML 4 Attributes ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/attributes.html ) 　また、vertical-align: text-bottom;は、tableのセルとか、行内の配置でこれも無効です。 <div class="gazou"> <ul> 　<li><a href="アドレス"><img src="gazou1.jpg" width=190 height=50></a></li><!-- 　<li><a href="アドレス"><img src="gazou2.jpg" width=190 height=50></a></li><!-- 以下、同様に続く・・・ </ul> </div> とただしくマークアップして、スタイルシートで配置します。たとえば ie6　でリストが横に並ばず縦に並んでしまう - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7329788.html )

質問者

お礼 2012/02/27 16:31

回答ありがとうございました。バージョンが違ってくると難しいですね・・・。

その他の回答 (1)

tailbeat
ベストアンサー率47% (9/19)

2012/02/26 22:12 回答No.1

周囲の隙間が生まれる理由はHTMLファイルのソースコードにおいて画像と画像の"記述"の間に改行があるからです。つまり <a href="アドレス"><img src="gazou1.jpg" width=190 height=50></a> <a href="アドレス"><img src="gazou2.jpg" width=190 height=50></a> では隙間が生まれますが <a href="アドレス"><img src="gazou1.jpg" width=190 height=50></a><a href="アドレス"><img src="gazou2.jpg" width=190 height=50></a> では隙間が出なくなります。ためしに画像に関する記述だけを並べてみてください。画像に関する記述の間をエンターキーで改行した場合としていない場合では違うはずです。ついでに、画像とテキストを並べるとまたそれにより下に隙間が生まれるのでご注意を。そしてついでに2つ。 nobrは推奨されないタグです。HTML5では廃止されるとか。そしてvertical-alignはdivには効きません。これはdivなど広範囲を取る"ブロック要素"にではなくspanなど限定された範囲を取る"インライン要素"においてかかります。

質問者