ボーダー（border）指定時のトラブル

最初の記事で幅（width）と余白（padding）に関するバグをご紹介しましたが、今回はそれに加えて
ボーダー（border）を指定する際の注意点をご説明します。

前回 width と padding は一緒に指定しないように、と解説しましたが、 border を
指定するときにも注意が必要です。
説明よりも実際に見てもらった方がわかりやすいと思うので下に例を載せておきます。

∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼
<html>
<head>
<style>
<!∼∼
.test1 {
width:300px;
padding:50px;
background-color:#CCCCCC;
}
p {
border:1px solid #000000;
}
∼∼>
</style>
</head>
<body>
<div class="test1"><p>テキストテキストテキスト</p></div>
</body>
</html>
∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼

わかりやすいように中の pタグには枠をつけています。
上のソースをhtmlファイルにコピペして、IE（ここではIE7）とfirefoxで見比べてみてください。
IEでは全体の幅がキッチリ300pxで表示されるのにfirefoxでは400pxになっていると思います。
これは前回解説したとおり、 padding の解釈の違いによるものです。
これは padding を次のように変更することで回避できると説明しましたね。

∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼
.test1 {
width:300px;
background-color:#CCCCCC;
}
p {
padding:50px;
border:1px solid #000000;
}
∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼

pタグの幅は指定してないので目いっぱいまで広がったものの、幅はどちらのブラウザで見ても
変わらなくなったはずです。ここまでは前回の復習ですね。

今回の問題はここからです。
今度は次のように border を付け加えてみます。

∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼
.test1 {
width:300px;
background-color:#CCCCCC;
border:10px solid #000000;
}
p {
padding:50px;
border:1px solid #000000;
}
∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼

IEでは問題なく見えますが、firefoxでは幅が増えていると思います。border も padding 同様
firefoxだと指定した幅にプラスされてしまいます。
この場合は左右に10pxずつの border なので幅300px + 20pxで320pxになります。
これを避ける場合も、幅の指定をしているタグの内側か外側に新たにタグを入れて、そこに
border を指定する、というやり方になります。

∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼
<html>
<head>
<style>
<!∼∼
.test1 {
width:300px;
background-color:#CCCCCC;
}
.test2 {
border:10px solid #000000;
}
p {
padding:50px;
border:1px solid #000000;
}
∼∼>
</style>
</head>
<body>
<div class="test1">
<div class="test2">
<p>テキストテキストテキスト</p>
</div>
</div>
</body>
</html>
∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼

これで幅が同じになったはずです。
お疲れ様でした^^

今回はIE7で検証しましたが、IE6でも似たような現象が起きますので、width と padding と
border は別々に指定するようにしましょう！
ソースを組んでしまってから気がつくと非常に面倒なことになりますので^^;