CSSで角丸テーブル

質問

CSSでDIV要素を使って入れ子し、角の丸いテーブルを作っているのですが、なぜか誤差が出てしまいます。
CSSのソースは次のようなものです。

table（2）.gifは角丸テーブルの画像です
画像サイズ：横440px 縦11px

.box-center-start {
width: 440px;
background: url(image/table.gif);
background-repeat: no-repeat;
}

.box-center {
width: 440px;
background-color: white;
margin: 20px 10px 20px 8px;
float: left;
}

.box-center2 {
width: 440px;
background-color: white;
padding: 0px 10px 10px 10px;
border-right: 1px solid gray;
border-bottom: 1px dashed gray;
border-left: 1px solid gray;
}

.box-center3 {
width: 440px;
background-color: white;
padding: 10px 10px 0px 10px;
border-right: 1px solid gray;
border-left: 1px solid gray;
}

.box-center-end {
width: 440px;
background: url(image/table2.gif);
background-repeat: no-repeat;
}

このように記述し、HTMLに

<DIV class="box-center">
<DIV class="box-center-start"></DIV>
<DIV class="box-center2">
～内容
</DIV>
<DIV class="box-center3">
～内容
</DIV>
<DIV class="box-center-end"></DIV>

と打ってもなぜか綺麗に表示されません。
クラス「box-center-start（end）」の下に、少し余白が入ってしまうのです。（10pxほどの）
何方か助言お願いしますm( _ _ )m

回答No.3

noname#19175

> そのレイアウトですが、なぜmarginがだめなんでしょう。
余白を開ける指定だから、余白があくのは当然です。

> 3px
box-center-endの中に画像を入れていて、文字がないのであれば、
vertical-align:bottom;
を指定してみてください。
そうでなければ、私にはわかりません。

参考URL：

http://www.mozilla.gr.jp/standards/webtips0018.html

回答No.2

NowThinking

.box-centerで width: 440px を設定しているのなら、
.box-center-start と .box-center-end で指定している width: 440px を削除してみてください。
ひょっとすると、それで解決する事柄かもしれません。

回答No.1

noname#19175

<DIV class="box-center">
<DIV class="box-center-start"></DIV>
<DIV class="box-center2">
～内容
</DIV>
<DIV class="box-center3">
～内容
</DIV>
<DIV class="box-center-end"></DIV>
</DIV>

というレイアウトなら、box-centerのmarginの影響ではないのでしょうか？
それともbox-center-endとbox-centerの下部との間に10pxの隙間が出来ているのでしょうか。
このスタイル以外に、
DIV {margin: 10px;}などの指定はありませんか？

お礼

そのレイアウトですが、なぜmarginがだめなんでしょう。
～endとcenterの下部の間に3pxの隙間が出来てしまいます。（10pxほどといいましたが、計ってみると3pxでした。すみません）

そのような指定はありません。