ボックスモデル

ノーマルスタイルブロック
ボックススタイルブロック
background-color:cyan; width:200px;height:200px; paddingとborderの太さが加算され四角は大きくなります。
マージン相殺の説明用ブロック
ボックススタイルブロックとマージン相殺の説明用ブロックの 両方にマージンをとっても,大きいほうのマージンしか現れません。

box-sizing

boxの大きさの指定にはcontent-boxとborder-boxがあります。

content-box

　何も指定しないときにはcontent-boxになります。

.sizing1{
background-color:yellow;
box-sizing:border-box;
width:200px;height:200px;
/*Padding box*/
padding: 8px 12px 16px 20px;
/*Margin box*/
margin: 8px 12px 16px 20px;
/*Border box*/
border:5px solid black;
}
box-sizing プロパティを指定しないと 文字を書く範囲の大きさにすることになります。

border-box

.sizing1{
background-color:yellow;
box-sizing:border-box;
width:200px;height:200px;
/*Padding box*/
padding: 8px 12px 16px 20px;
/*Margin box*/
margin: 8px 12px 16px 20px;
/*Border box*/
border:5px solid black;
}

box-sizing プロパティに border-boxを指定すると線の外側までの大きさにすることができます。

全てをボーダーボックスにする

CSSのはじめに"*"ワイルドカードを使って
* {
box-sizing:border-box;
}

とするとすべての要素の box-sizing プロパティに border-box を適用することができます。