猫温度計観測所

初心者なので（これが自分で作った２つ目のblogです）もしかしたらとってもハズカシーことやってるかもしれませんが、とにかく、これで余白が取れます。もっといい方法をご存知の方がいらっしゃいましたら教えてください。おねがいします。

1.サイドバーの左寄せで余白なし
2.サイドバーの真ん中配置で余白なし
3.サイドバーの幅で上下左右均等の余白
の３つについて書きます。

たとえば、この観測所ブログではネコ温度計の部分に
"ondo"というclassを作って指定しています。

"ondo"は、"right"というIDと"sidebar"というclassの中にあります。
それぞれ横幅が

#right {
width: 200px;
}

.sidebar {
padding: 10px;
}

ですから、200px-10px*2=180pxが
.ondoの横幅になります。

ネコ温度計の大きさは150*150pxですので
180-150=30pxが左右の余白です。

1.サイドバーの左寄せで余白なしの場合
　右側のmarginを(余白ーborder幅*2)=30-1*2=28に指定します。
（　上下は0pxにしてあります）

.ondo {
border: 1px solid #FF6600;
margin: 0px 28px 0px 0px;
}

2.サイドバーの真ん中配置で余白なし
　左右のmarginを(余白/2ーborder幅)=30/2-1=14に指定します。
　（上下は0pxにしてあります）

.ondo {
border: 1px solid #FF6600;
margin: 0px 14px 0px 14px;
}

3.サイドバーの幅で上下左右均等の余白
　上下左右のpaddingを(余白/2ーborder幅)=30/2-1=14に指定します。

.ondo {
border: 1px solid #FF6600;
padding: 14px;
}

class名や数値などはご自分の設定に変えてください。
marginとpaddingを組み合わせればビミョーな配置や余白ができるかもしれません。
（計算が苦手な私はこれで限界です ^^;）