画像サイズも設定しているのですが、なぜか画像の下にスペースが空きます。 vertical-alignを入れてみたのですが、解決しません。問題なのは、・画像と画像の間にスペースが空く・画像と画像のスペースの下に、下線が表示される（画像をよく見ていただければ分かると思います。）・画像の下に空白ができる以下、同様に続く・・・ div.gazou { clear: both; background-color: #0099ff; vertical-align: text-bottom; } ※画像は改行なしで横並べ。画像のサイズは正しく指定してあります。

でソースコードの視認性のために改行しても、空白類は消えます。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからここで、ソース文書中で語間に空白類が複数連なっている場合、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 )］よりなお、は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のセルとか、行内の配置でこれも無効です。とただしくマークアップして、スタイルシートで配置します。たとえば ie6 でリストが横に並ばず縦に並んでしまう - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7329788.html )

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

解決済

質問者：noname#150172
質問日時：2012/02/26 21:06
回答数：2件

画像サイズも設定しているのですが、なぜか画像の下にスペースが空きます。
vertical-alignを入れてみたのですが、解決しません。

問題なのは、
・画像と画像の間にスペースが空く
・画像と画像のスペースの下に、下線が表示される（画像をよく見ていただければ分かると思います。）
・画像の下に空白ができる

<HTML>

<div class="gazou" align="center">
<nobr>
<a href="アドレス"><img src="gazou1.jpg" width=190 height=50></a>
<a href="アドレス"><img src="gazou2.jpg" width=190 height=50></a>
以下、同様に続く・・・
</nobr></div>

<CSS>

div.gazou {
clear: both;
background-color: #0099ff;
vertical-align: text-bottom;
}

※画像は改行なしで横並べ。
画像のサイズは正しく指定してあります。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2012/02/27 09:06

<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-html4 … )］より

　なお、<nobr>はHTML4.01以降は存在しない要素です。
※Index of the HTML 4 Elements ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　align="center" は、divにはありません。
※Index of the HTML 4 Attributes ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　また、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://oshiete.goo.ne.jp/qa/7329788.html )

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございました。

バージョンが違ってくると難しいですね・・・。

通報する

お礼日時：2012/02/27 16:31

No.1

回答者： tailbeat
回答日時：2012/02/26 22:12

周囲の隙間が生まれる理由は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など限定された範囲を取る"インライン要素"においてかかります。