画像を横に並べると隙間ができてしまいます

解決済

質問者：konota
質問日時：2007/11/22 15:56
回答数：3件

メニューを作るために画像画像画像画像画像画像と並べた所、一番右端に隙間ができてしまいます。画像画像画像画像画像画像□←こんな感じの半角スペースです。画像と画像の間の余白はマージンを０に指定して削除できましたが、右端の余白はどうすれば削除できるんでしょうか？ちなみにメニューに使用した画像６個分の大きな画像を１つ貼った場合このような余白はできませんでした。

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3ベストアンサー

回答者： CHI-512
回答日時：2007/11/23 11:13

こんにちは。

コーディング環境でたまに見られる事例です。

<img><img><img><img><img><img>
<div>～</div>
<p>～</p>
というソースがあったとします。

↑最後の<img>で改行しました。
インライン要素である<img>の後ろに（ソース内）改行があると
それが半角スペースと認識されるケースがあります。
（↓■＝半角スペース）

<img><img><img><img><img><img>■
<div>～</div>
<p>～</p>

また、

<img>
<img>
<img>
<img>
<img>
<img>

<div>～</div>
<p>～</p>

というソースを書くと、

<img>■
<img>■
<img>■
<img>■
<img>■
<img>■

<div>～</div>
<p>～</p>

となり、画像の後ろに必ず半角スペースが入ってしまう！というケースもあります。

これを防ぐには、

<img><img><img><img><img><img><div>～</div>
<p>～</p>

↑<img>で改行させずにタグを続けるか、

<div><img><img><img><img><img><img></div>
<div>～</div>
<p>～</p>

↑のようにブロック要素に入れてやると直ると思います。

見当違いな回答だったらごめんなさい。
参考になれば幸いです。

- 1
- 件

通報する

No.2

回答者： xenotactic
回答日時：2007/11/22 17:18

えー、削除された質問に回答したものですが、

第一に画像がローカルのアドレスになっていたため、
まずそこから修正するといいと思います。
ところで、半角スペース1つ分がそこまで見た目に影響するのでしょうか。

- 0
- 件

通報する

No.1

回答者： Us-Timoo
回答日時：2007/11/22 16:12

カテゴリーがブログになっているようですが、どこのブログですか？

それくらいは書いていただかないと、見ている側もどこのブログサイトを
お使いなのか、見当がつきません。

もしも、ブログでなくWeb作成のことなら
私なら、その画像を入れる表を作り、その中に
それぞれの画像を入れて、升目の大きさを画像の大きさに合わせます。
これのほうが、表示したときに配置を崩されずにすみますので。