xhtmlの記述について

質問

現在がんばって、xhtmlでサイトを作成しているのですが、
どうしても思ったとおりに表示されずに悩んでいます。どなたかアドバイスをお願いできますでしょうか
DreamWeaver8
をしようしています
--------------------------------------------
<div id="content">
<img src="img/right_service.jpg" alt="サービス" width="140" height="25" />
<p class="sevice_cont">
内容文
</p>
</div>
--------------------------------------------
【css】
#content {
background: #FFFFFF;
margin: 10px 0px 0px;
padding: 0px;
float: right;
height: 800px;
width: 163px;
}
.sevice_cont {
width: 138px;
border: 1px solid #666666;
margin: 0px;
padding: 0px;
height: 283px;
}
------------------------------------------
これは簡単な枠の上にタイトル画像をおいて、
内容を記述するためのhtmlなのですが、
コレをIE7でプレビューするとタイトル画像とその下の
枠が5px程離れてしまいます。
どんなにマージン等を0にしても隙間はあいたままでした

ちなみにOperaでプレビューするとちゃんとくっついているのですが
どのような原因がかんがえられるのでしょうか？
そもそもこのhtmlの記述が間違っているのかもしれないのですが、

どうかよろしくお願いいたします

あと、関係ないのですが
ボーダーの線って、横幅に含まれないんでしょうか？

回答No.1

Rusica · ベストアンサー

body要素のmargin及びpaddingも0にしてみてはいかがでしょうか？
また、CSSでレイアウトするときは全称セレクタを用いて

*{
margin:0;
padding:0;
}

と始めに指定しておくと楽です。
各要素に必要なmargin・paddingを逐一指定しなければいけなくなりますけどね。

>ボーダーの線って、横幅に含まれないんでしょうか？
border及びpaddingの幅はボックスのwidthには含まれません。
ただし、IE6の後方互換モード、IE5.5以前などでは含まれた状態で表示されます。