画像にリンクを張ったら、レイアウトが崩れました。
ホームページを制作しているのですが、リストにして並べた画像にリンクを張ったら、レイアウトが崩れてしまいました。
まず、リンクを張らずにやってみました。
HTML部分
<ul id="main_center">
<li id="1"><img src="http://***.jpg" /></li>
<li id="2"><img src="http://***.jpg" /></li>
<li id="3"><img src="http://***.jpg" /></li>
</ul>
CSS部分
#main_center #1,#2,#3 {
display: block;
width: 220px;
height: 20px;
list-style-type: none;
margin-bottom: 10px;
}
タグは以上の通りでやったところ、問題なく画像が綺麗に並んだのですが、
<ul id="main_center">
<li id="1"><a href="http://***/"><img src="http://***.jpg" /></a></li>
<li id="2"><a href="http://***/"><img src="http://***.jpg" /></a></li>
<li id="3"><a href="http://***/"><img src="http://***.jpg" /></a></li>
</ul>
といった感じで、画像にリンクさせたところ上下に余分なスペースが出来てしまいました。
リンクを張っただけで、レイアウトが崩れてしまうということはあるのでしょうか。
または、なにかタグが間違っているのでしょうか。
どなたかアドバイスをお願いいたします。
