試してみる〜marginとpadding〜

わかっているつもりで、実際にわかっていない、２つの関係。
marginとpaddingは、いつもそんなぐあいでした。
「グラスの中のビー玉」でも、なかなかきれいに表示されずに
困ってた時、ふと思い立ってmarginをpaddingに変えただけで
収まった。。ということがありました。
なんか、つかみきれてないんですよね。びおびお。
前のエントリでも、枠ぎりぎりに文字をいれたくないので
paddingを１０pxづつとったけど、そのぶんをwidthから
引くのか引かないのかで、「う〜。」ってなってたら、
お師匠さまが解説してくださいました。（感激）
（前のその3.5コメントをごらんくださいませ）

それで、「見て」みることにした。
お師匠さん曰く
「width:100px; padding:10px;
　と
　width:80px; margin 10px;
　は見かけ上同じものに見えます。が、枠を引いて中に文字を
　書くと違いがわかりますよ。」と。

なので、びおびお。このblogのcenterを使って
A　width:390px; padding:10px;
B width:370px; margin:10px;　
　　　　　　　　　　　　　になるように変えて「見た」。

A


B



でした。画像を作っている途中で気がついたのが
「枠がBのほうが、小さくなってる！」
余白が、枠線の外についてるか、内についてるかが
しっかり、わかったです。合計の幅はいっしょなのね。

marginとpaddingを同時に使うときは、ちょっと計算しないと
いけないのですね。。。（びおびおは文系。。）

[おまけ]
FC２のプレビューはSeesaaのより使えるぞ！
どうやって使えばいいのか、わかるのに３日、かかったけど。
それとFirefoxのタブって、こんなに便利だったとはっ！！

以上です。ほひ！