画像にリンクを張るとレイアウトが崩れます。

質問

はじめまして。
現在、Dreamweaverでホームページを作成しています。

横幅ジャストサイズ（正確には10pxのスペース画像含む）でメニューを並べています。
一通り画像のレイアウトが済んで、いざそれぞれのメニューボタンにリンクを張ると、なぜかボタンの枠が紫色に囲まれ、あげくには少しずつボタンが横に移動してしまいます。

そして、最後のメニューボタンが収まりきらず下に回ってしまいます。ちなみにCSSで作成しています。
ブラウザでプレビューしてみたところ、画像の周りの紫色の枠は残ったままで、最後のボタンは見えません（これはCSSで縦の枠幅を指定しているからとは思うんですが・・・）

リンクを張ってもhtmlをいじるだけで、デザイン上はかわらないと思うのですが、そうではないのでしょうか？
以前も、コードを通常の改行（<br>じゃない）するとレイアウトが崩れた記憶があります・・・

この現象の解決方法などはあるのでしょうか？

回答No.1

goldfox · ベストアンサー

スタイルシートで
a img{border:none;}
を加えましょう。
（a要素の中のimg要素の枠線を消去する指定）

お礼

ありがとうございます。
先ほど自分でも調べて画像に関する解決方法はわかったのですが、これってものすごく初歩中の初歩みたいですね・・・

いままでもいくつか作ったりしているのにこのような現象は起きなかったのに・・・

あ、a要素の中野imgを指定する方法は知りませんでした！
本当にありがとうございました。

ちなみに改行によってレイアウトが崩れるのはなんでなんでしょうか？
もし、ご存知でしたらどうかよろしくお願いいたします。

回答No.2

buntan_bun

ソース中で改行を行った場合には、ブラウザが当該個所を改行コードと見なして半角スペースに自動変換することがあるようです。
変換された「スペース分の幅」（今回質問ではimg要素のborderの幅）が発生するために、本来の幅（横幅ジャストサイズ）よりも広くなり、結果として器（横幅）に入りきらないために溢れ出てレイアウトが崩れる、ということのように思えます。

ソースの書き方によりli要素間で隙間が空くことがあるのは比較的有名ですが、「改行によってレイアウトが崩れるのはなんでなんでしょうか？」という質問（現象）の原因も同じことではないかと思われます。

お礼

ありがとうございます。
解決方法はありますでしょうか？