http://www10.plala.or.jp/palm84/css_memo_border_width.html
こんなboxを作ってみる。(div.test50)
margin: 0; padding: 0; font-size: 1em; line-height: 100%; letter-spacing: 0px; background-color: #f1f1f1; overflow: auto; width: 50%; border-bottom: 1px dotted #000;
こんなかんじ
これに border を付けると、幅・高さとも変わってしまう。
border : 10px solid #ccc;
反則ですけど、borderを%で指定すると...
width: 46%; border-style: solid; border-width: 2%; border-color: #ccc;
ブラウザごとに表示が異なるんでだめみたいですね。
width:100% にすると
とりあえず親要素内で100%となるらしい？これに border を付けるとはみだしてしまうわけ、かな？
反則ですけど、borderを % で指定。border-width:2%;width:96%; だとブラウザによって表示が違いますね。
width:100% にborder を付ける場合は親要素への影響に注意ですね。
「なるべく単位を同じにせよ」と言うのは、つまり計算違いを避けるためってことなんでしょうね。でも border-width は%で指定しちゃだめよだめよだめなのよ。（コケ）
div要素での確認です。通常はwidthなしでいい場合が多いと思いますけど、IE対策でwidthを設定する時のためにmargin,paddingからの計算方法とか考えてみる。
padding:2% を設定したらはみ出しました。左右のpadding分を引いて width:96% を指定。
padding:2% な親箱に width:100% の小箱
同様に margin:2% を設定したらはみ出しました。左右のmargin分を引いて width: 96% を指定。
margin:2% な親箱に width:100% の小箱
背景色付けてみると一目瞭然ですけど、きっちりwidthを指定しないとはみでたりするんですねぇ。注意かも。（div要素だからかな？）
background-color:wihte の子要素を入れる
子要素に margin:5%;width:90%（Opera,Firefoxは上marginの背景色がない、IE6では上下marginがおかしいなぁ）
子要素に margin:1em;width:90%（Opera,Firefoxは上marginの背景色がない）
親箱に padding:1em;width:46%; 子要素に margin:0;width:100%
子要素に padding:5%;width:90%
子要素に border:10px solid yellow;width:94%
親箱に padding:1em;width:46%; 子要素に ul要素 margin:0;padding:0 0 0 1em;
親箱 padding:5%;width40%; 子要素に ul要素 margin:0;padding:0 0 0 1em;
う〜んなんか頭痛くなってきました...
こんなboxで。(div.test8em)
margin: 2% 0 0 10%; padding: 0; font-size: 1em; line-height: 100%; letter-spacing: 0px; background-color: #f1f1f1; width: 8em;
width:8em を指定。フォントによって幅・高さが若干違うみたいですが？
margin も padding も0のはずなのに、ＭＳ Ｐゴシックでは右側に余白があるのはなぜなのかな、って 1em は基準フォントの高さだからですか。
p要素で囲む。p要素に margin,padding が指定されてると改行されてますね（p要素なのだから改行していいんですけどね。文字を改行なしで表示する目的には使うべきじゃないし）。区切り文字のない長い単語ははみ出します。
クマがいるだけで
クマしかいない夜
windows123456789
windows 12345678
llliillliillliil
border 付ける
というわけで、width など長さの単位をemで指定する場合は、環境次第で変わってしまうということに注意かな？
letter-spacing をチェックline-height をチェック環境によって基準フォントは違うってことを考えておかないといけないかも。
letter-spacing:1pxletter-spacing: 1px;
これは改行 or はみだしが必定...
font-size:80%font-size : 80%;
幅は通常サイズの時と同じですね...ってこれもあたりまえか...orz2
line-height:120% にしてみると
VL Pゴシック（プロポーショナル）とVL ゴシック（等幅）を標準にして使っていない環境でも入っていれば確認できるように、明示的に指定してみました。
【注意】このフォントがない環境では Sans-Serif 設定のフォントとなります。
width:8em を指定。フォントによって幅・高さが若干違うみたいですねぇ。
サイズはきっちり8emになってますね。でも、よくわかりませんが英数は0.5em以下とは限らないようではみ出してたり。
overflow:auto を指定してみると
Firefox,Safariでは出なくていいはずの縦スクロールバーが出たりします。高さが違うのでしょうか？
Firefox,Safariでの縦スクロールバーに関しては、 line-height 調整すると消えるかな？
ここからVL ゴシックを指定します。
【注意】このフォントがない環境では monospace 設定のフォントとなります。
サイズは英数ともきっちり8emになってますね。
overflow:auto を指定してみると
Firefoxでは出なくていいはずの縦スクロールバーが出たりします。高さが違うのでしょうか？
Firefoxでの縦スクロールバーに関しては、 line-height 調整すると消えるかな？
最終更新日：2010.5.5
em について勘違いしてたので訂正しました。すみません。
VL ゴシックはLinuxなどで標準になりつつあるので表示確認しておいた方がいいかもしれませんねぇ。
なんて、自分がWindowsでもこれを使ってるもんだから勝手に思い込んでるだけだったりするかもしれないという気がしないかもしれない。
以下、つづく...（予定は未定）