全体のサイズが、横幅200px、縦幅100pxのボックスをつくりましょう。
・・・じつは、これまでつくったボックスは、全体のサイズが200×100pxではなくなっています。
枠線とサイズとパディングとマージンを定義したボックス
これが今までのボックス。
これが全体幅200×100pxのボックス
これをつくって下さい。
widthと
heightは、
内容のサイズを決定する属性です。
枠線とパディングのサイズは含まれてません。
だから、今までの設定ですと、
横幅が、width + padding + border = 200px + 10px + 2px =
212px
縦幅が、height + padding + border = 100px + 10px + 2px =
112px
となっていたのです。
パディングと枠線のサイズの分だけ、全体のサイズが大きくなってたんですね。
だから、全体のサイズを200×100pxに設定したいのなら、
widthと
heightから、
パディングと枠線のサイズを引き算して、
値を定義してあげないといけません。
.box2 {
border:1px solid #CC0000;
width: 188px; /*パディングと枠線のサイズを引き算して定義する*/
height: 88px; /*パディングと枠線のサイズを引き算して定義する*/
padding: 10px 0px 0px 10px;
margin: 0px 0px 0px 100px;
}
横幅に関係するパディングは、左から１０ｐｘという設定で、
枠線は左と右に１ｐｘの線が１本ずつあるので、２ｐｘ。
縦幅も同じだから、それぞれ、12pxずつ引き算して、定義しています。
スタイルシートでレイアウトする時には、
この感覚を身につけないと、
レイアウトがグダグダになってしまうので、しっかり覚えておきましょう。
