CSS マージンと余白

マージン、枠、余白の関係は下図のようになる。コンテンツと枠の間にある間隔が余白（padding）であり、枠の外側部分がマージン（margin）となる。

背景色や背景画像を設定した場合は、枠の内側に適用される。マージン部分は透過色となるため、背景は付かない。

２．マージン、余白、枠線の設定

マージン指定　｛　margin　：　（マージンの長さ）　；　｝

枠の指定｛　border　：　（線の太さ）　（線のスタイル）　（線の色）　；　｝

　（例）マージン幅30px（ピクセル）、余白20px、枠の太さ5px（茶の実線）、背景色ライトグリーンのボックス。　　

div  {
     margin : 30px ;
     padding : 20px ;
     border : 5px solid maroon ;
     background-color : lightgreen ;
}

　・・・　略　・・・

<div>マージン、枠、余白を設定します。コンテンツと枠の間にある間隔が余白（padding）になります。枠の外側部分はマージン（margin）です。背景色や背景画像を設定した場合は、枠の内側に適用され、マージン部分は透過色になります。</div>

margin　（値）: 上下左右の４方向について、すべて同じマージンを指定する
margin　（上）　（右）　（下）　（左）: 上下左右のマージンをそれぞれ別に指定する
（例）　margin 10px　5px　10px　5px
margin-top　（値）: 上マージンを指定する
margin-bottom　（値）: 下マージンを指定する
margin-left　（値）: 左マージンを指定する
margin-right　（値）: 右マージンを指定する

padding　（値）: 上下左右の４方向について、すべて同じ余白を指定する
padding　（上）　（右）　（下）　（左）: 上下左右の余白をそれぞれ別に指定する
（例）　padding 10px　5px　10px　5px
padding-top　（値）: 上の余白を指定する
padding-bottom　（値）: 下の余白を指定する
padding-left　（値）: 左の余白を指定する
padding-right　（値）: 右の余白を指定する

枠線に設定できる項目は、「線の太さ」、「線のスタイル」、「線の色」の３つである。これらは上の例のようにまとめて設定することもできるし、下記の方法を用いて個別に設定することもできる。

■線の太さ
border-width　（値）: 上下左右の４辺の枠線すべてを、同じ太さに指定する
border-width　（上）　（右）　（下）　（左）: 上下左右の４辺それぞれの太さを指定する
（例）　border-width 3px　5px　3px　5px
border-top-width　（値）: 上枠線の太さを指定する
border-bottom-width　（値）: 下枠線の太さを指定する
border-left-width　（値）: 左枠線の太さを指定する
border-right-width　（値）: 右枠線の太さを指定する
■線のスタイル
border-style　（スタイル）: 上下左右４辺の枠線に共通のスタイルを指定する

none   ：  枠線なし
solid    ：   実線
double  ：  二重線
dotted  ：  点線

border-style　（上）　（右）　（下）　（左）: 上下左右の４辺それぞれにスタイルを指定する
border-top-style　（スタイル）: 上枠線にスタイルを指定する
border-bottom-style　（スタイル）: 下枠線にスタイルを指定する
border-left-style　（スタイル）: 左枠線にスタイルを指定する
border-right-style　（スタイル）: 右枠線にスタイルを指定する
■線の色
border-color　（色）: 上下左右４辺の枠線に同一の色を指定する
border-color　（上）　（右）　（下）　（左）: 上下左右の４辺それぞれに色を指定する
border-top-color　（色）: 上枠線に色を指定する
border-bottom-color　（色）: 下枠線に色を指定する
border-left-color　（色）: 左枠線に色を指定する
border-right-color　（色）: 右枠線に色を指定する

マージンと余白

１．ボックスの構造

２．マージン、余白、枠線の設定