スタイルシート(CSS)講座 トップ >> レヴェルアップ練習問題 >> マージンでボックスの位置を定義

マージンでボックスの位置を定義

前回作成したボックスに、さらにマージンも定義してみましょう。
マージン(margin)の設定は、左から100pxはなれるように。
定義の方法と場所は前回と同じ。

枠線とサイズとパディングとマージンを定義したボックス




マージンを定義するために必要な属性は、margin

CLASSセレクタだから、次のように定義します。

.box {
   border:1px solid #CC0000;
   width: 200px;
   height: 100px;
   padding: 10px 0px 0px 10px;
   margin: 0px 0px 0px 100px;
}

マージンの定義の仕方も、パディングと同じで特殊な形です。
値の書き方を説明すると、
左から、上・右・下・左 と定義しています。


そして、

<DIV CLASS="box">

枠線とサイズとパディングを定義したボックス

</DIV>

このように、HTML部分にカキコしてあげましょう。

<< パディングの定義もプラスしてみよう

枠線とパディングとサイズの正確な感覚を >>

<< スタイルシート(CSS)講座 トップ