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

質問

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

回答No.3

CHI-512 · ベストアンサー

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

<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>

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

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

回答No.2

xenotactic

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

回答No.1

Us-Timoo

カテゴリーがブログになっているようですが、どこのブログですか？
それくらいは書いていただかないと、見ている側もどこのブログサイトを
お使いなのか、見当がつきません。

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