HTMLのIMGタグについて

質問

HTMLのimgタグで(1)と(2)のようにした場合、表示が異なります。

(1)のほうが画像間のスペースが広くなります。また(2)の場合でも
ほんの少しスペースが開くようです。

(1)
<img src="image1">
<img src="image2">

(2)
<img src="image1"><img src="image2">

HTMLは文章の構造タグなので(1)でも(2)の場合でも、改行は関係ないので
同じ表示になるべきなのではないでしょうか？
なぜ異なった表示になるのでしょうか。

また画像間のスペースを0にしたいのですが、何か方法を教えてください。

回答No.4

peron · ベストアンサー

（１）の場合、キャリッジリターンと言います。
image1とimage2の間に半角スペースがあたかもあるように解釈されてしまう事です。
（２）では、私が検証した場合空白はありませんでした。（ＸＰ上　ＩＥ６、ＮＮ4.5、ＮＮ７）
ただ、気になるようでしたら
<IMG
src="image1"><IMG
src="image2">
という表記にされてはいかがでしょうか？
タグに属性を記入する時に半角あけるのを利用しています。（これでも成功しなければ、画像に白い部分がないかチェックしてください。問題がなければ、下記の方法があります）
W3Cでは推奨されてませんが、tableでむりやり固定してしまう事・・・もう過去の産物ですからお勧めしがたいです。
もう一つは
<DIV id="Layer1" style="position:absolute; width: 200px; height: 200px; z-index:1; left: 200px; top: 20px;>
<IMG src="image1">
<DIV>
という具合にレイヤーを作り画像を配置、２つめのレイヤーを作り
<DIV id="Layer2" style="position:absolute; width: 200px; height: 200px; z-index:2; left: 200px; top: 20px;>
<IMG src="image2">
<DIV>
画像を配置し、left top の値を調整しピッタり付けるという馬鹿な手もあります。（サンプルコードでは付いてませんので、いじって下さい）

回答No.3

UKY

> HTMLは文章の構造タグなので(1)でも(2)の場合でも、改行は関係ない

全く改行が関係ないわけではありません。
次の例を見てください。

<p>This is
my pen.</p>

この例では、改行を全く無視する訳には行きません。改行を無視すると、
This ismy pen.
という意味不明な英文が出来上がってしまいます。正しくは、
This is my pen.
と表示されなくてはなりません。

HTML内における空白や改行は、単語と単語を区切るものとして扱われると定義されています。すなわち、英語においては空白や改行は「スペース」として表示されるべきですし、日本語においては表示されない(無視される)べきです。

従って、空白や改行が正しく解釈されるためにはHTML内においてlang属性を使って言語を明示すべきところですが、実際にはたとえlang属性を用いても言語に応じて処理を変えてくれる賢いブラウザは存在しないようです。(ほとんどのブラウザは言語にかかわらず空白や改行を機械的に「スペース」に変換しているだけのようです)

ご質問の件では、賢くないブラウザが

<img src="image1">
<img src="image2">

を

<img src="image1"> <img src="image2">

と解釈したために、画像の間にスペースが入ったと思われます。

回答No.2

namiri_e

改行は一見関係ないようで、実は改行コードが間にはいると空白があくようです。

参考URLの該当箇所を読んでみてください。

参考URL：

http://www.din.or.jp/~itoh01/Computer/HTML.html#BR_P_DIV

回答No.1

botamochiohagi

こんにちは。

（１）
<img src="image1" border="0">
<img src="image2" border="0">

（２）
<img src="image1" border="0"><img src="image2" border="0">

これでしょうか。