スタイルシートでフレーム枠を隙間なくピタリとつける。

よろしくおねがいします。
http://www.sonzai.net/test/test.html
参考URL↑
中央に<iframe>を置き、それを囲むようにフレームを設置したいのですが、
下辺だけ微妙に離れてしまいます。
【HTML】
<div id="subnavibar">
<p><img src="images/top/event.png" width="220" height="50" /></p>
<img src="images/top/event.png" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="images/top/event.png" width="10" height="300" />
<p><img src="images/top/event.png" width="220" height="20" /></p>
</div>


【css】
#subnavibar {
width: 240px;
float: left;
background-color: #ffffff;
height: 100%;

}


原因としては、何があるでしょうか？

No.2 ベストアンサー 回答者： think49 回答日時： 2009/06/18 17:08

> 原因としては、何があるでしょうか？

「img要素の基準線としてbaselineが指定されているから」だそうです。(調べて知りました)
対策は2つあります。

1. 空白文字を取り除く
<div id="subnavibar">
<p><img src="01.gif" width="220" height="50" /></p>
<img src="02.gif" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="02.gif" width="10" height="300" /><p><img src="03.gif" width="220" height="20" /><BR><BR>赤のバーがピッタリとくっつきません。</p>
</div>

2. vertical-align:bottom; を指定する
<style type="text/css">
img,iframe { vertical-align:bottom; }
</style>

Export-Japan Blog » Blog Archive » IEで、画像の下に隙間ができたり、逆に隙間がバラバラだったり
http://www.export-japan.co.jp/blog/2007/06/21/ie …

No.3 回答者： edct1 回答日時： 2009/06/22 13:48

なぜか改行場所を変えただけで、IE8では引っ付きました。

理由は分かりません。

<DIV id=subnavibar>
<P><IMG src="test.files/01.gif" width=220 height=50></P>
<IMG src="test.files/02.gif" width=10 height=300><IFRAME height=300
src="test.files/a.htm" frameBorder=0 width=200 name=side
scrolling=yes></IFRAME><IMG src="test.files/02.gif" width=10 height=300><P><IMG src="test.files/03.gif" width=220 height=20>
<BR>

No.1 回答者： noname#119508 回答日時： 2009/06/18 15:11

Firefoxならくっついてますよ。

<div id="subnavibar">
<img src="01.gif" width="220" height="50"><br>
<div style="clear: both;">
<img src="02.gif" width="10" height="300" style="float: left;">
<iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side" style="float: left;">a.html</iframe>
<img src="02.gif" width="10" height="300" style="float: left;">
</div>
<img src="03.gif" width="220" height="20">
</div>
↑これに変えてみてください
「 /」はXHTMLで作ってないからいらないですよ。