画像にリンクを張ったら、レイアウトが崩れました。

ホームページを制作しているのですが、リストにして並べた画像にリンクを張ったら、レイアウトが崩れてしまいました。

まず、リンクを張らずにやってみました。
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>

といった感じで、画像にリンクさせたところ上下に余分なスペースが出来てしまいました。

リンクを張っただけで、レイアウトが崩れてしまうということはあるのでしょうか。
または、なにかタグが間違っているのでしょうか。
どなたかアドバイスをお願いいたします。

No.1 ベストアンサー 回答者： goldfox 回答日時： 2007/08/25 12:26

状況を再現できるソースを提示しましょう。

やってみましたがどちらも同じに見えます。（リンクのほうは枠線が出るくらいで）

ID名は数字で始まるものは使えません。