学生時代からの友人が、アパレル業界からWeb業界にジョブチェンジしまして。（おめでとう！がんばってね！）
そんな彼から一本の質問電話が。「上下左右1pxのborderで囲ったwidth150pxくらいのボックスを、marginで間隔を空けずにfloatさせて商品一覧を作りたいんだけど。ボックス同士が隣り合うとボーダー2pxに見えてイケてない。どうすればいい？」
……。文章にすると伝わり辛いですね。質問を図で表現するとこのように困っているようです。
ということらしいです。解決方法はいくつかありますが、私の場合のやり方を。
全体の表示領域を600px（#list）とします。
その中にwidth150pxの商品達（.items）を4列2行で並べます。
解説付きのデモ用意しました
まずはhtmlの書き方
4列2行なのでズラズラ書いています。m( _ _ )m liの中は全部同じです。
[html]
-
商品名が入ります
お値段が入ります
-
商品名が入ります
お値段が入ります
-
商品名が入ります
お値段が入ります
-
商品名が入ります
お値段が入ります
-
商品名が入ります
お値段が入ります
-
商品名が入ります
お値段が入ります
-
商品名が入ります
お値段が入ります
-
商品名が入ります
お値段が入ります
[/html]
css
width、border、font-size、paddingなどはお好みでどうぞ。
ポイントは12行目と13行目です。
12行目のmarginで、borderサイズの分をマイナスしてます。
今回はボックスのborderを1pxにしましたので、-1pxと書いてます。
（borderを3pxするなら、-3pxと書きます）
13行目はIE対策です。
書かないとマイナスした分の右と下のborderが消えてしまいます。＞＜
[css]
#list {
width: 600px;
}
#list .items {
float: left;
width: 150px;
list-style: none;
}
#list .items div {
border: 1px solid #CCC;
padding: 5px;
margin: 0px -1px -1px 0px;
position: relative;
}
#list .items div h3 {
font-size: 14px;
margin: 0px;
padding: 0px;
}
#list .items div p {
font-size: 12px;
margin: 0px;
padding: 0px;
}
[/css]