[HTML/CSS]margin属性の使い方

概要

いくつかの小さなプロジェクトでは、フロントスタイルはやはり自分で書く必要があります.このとき、marginはレイアウトの中で一定の地位を持っています.前編で紹介したボックスモデルには、marginの存在があります.

margin

marginは、cssブロックレベル要素間の距離を設定するために使用できます.

        * {
            /*       （       ）*/
            margin-left: 0px;
            /*       （        ） */
            margin-right: 0px;
            /*      （    （ ）    ）*/
            margin-bottom: 0px;
            /*   ( )     （          ）*/
            margin-top: 0px;
        }

ピクセルの使用に加えて、パーセンテージ方式も使用できます.

 1         * {
 2             /*       10  ，      （margin-left:10%;         10%   ）*/
 3             margin-left: 10px;
 4             /*        10  ，      （margin-right:10%;        10%   ） */
 5             margin-right: 10px;
 6             /*        10  ，      （margin-bottom:10%;        10%   ）*/
 7             margin-bottom: 10px;
 8             /*        10  ，      （margin-top:10%;        10%   ）*/
 9             margin-top: 10px;
10         }

もっと簡単に書くことができます.

 1        div {
 2             margin: 10px;
 3             /*               10px（10  ）  */
 4             /*margin-top: 10px;
 5             margin-bottom: 10px;
 6             margin-left: 10px;
 7             margin-right: 10px;*/
 8             margin: 5px 10px;
 9             /*          5px，         10px，  */
10             /*margin-top: 5px;
11             margin-bottom: 5px;
12             margin-left: 10px;
13             margin-right: 10px;
14           */
15             margin: 5px 6px 7px;
16             /*        5px，       7PX，        6px，  */
17             /*margin-top: 5px;
18             margin-bottom: 7px;
19             margin-left: 6px;
20             margin-right: 6px;*/
21             margin: 5px 6px 7px 8px;
22             /*       5px，       6px ，       7px，      8px，  */
23             /*margin-top: 5px;
24             margin-right: 6px;
25             margin-bottom: 7px;
26             margin-right: 8px;*/
27         }

ここで、margin:5 px 6 px 7 px 8 pxは時計回りの方向に値を設定します.参照:http://www.divcss5.com/shili/s6.shtml