マージンに関するプロパティを説明します。
★マージン(margin)・パディング(padding)・ボーダー(border)とは？
マージン(margin)とは、要素周りの余白部分で、パディング(padding)とは
要素（文字や画像）からボーダー(border)までの領域部分です。
ボーダー(border)は要素を囲む箱のようなものです。
パディング関連のプロパティ
ボーダー関連のプロパティ
★上マージンを指定する
書式 margin-top:高さ
上マージンの高さを指定します。
負の値を指定することも可能です。
記述例
--- CSSの記述 ---
/* 上マージンの高さを指定 */
P.mtop{
margin-top:35px;
background-color:#87ceeb;
}
--- HTMLの記述 ---
<P class="mtop">上に35pxのマージンを指定</P>
ブラウザで表示
★下マージンを指定する
書式 margin-bottom:高さ
下マージンの高さを指定します。
負の値を指定することも可能です。
記述例
--- CSSの記述 ---
/* 下マージンの高さを指定 */
P.mbot{
margin-bottom:60px;
background-color:#98fb98;
}
--- HTMLの記述 ---
<P class="mbot">下に60pxのマージン</P>
かきくけこ
ブラウザで表示
★左マージンを指定する
書式 margin-left:幅
左マージンの幅を指定します。
負の値を指定することも可能で、負の値を利用して複数の領域を重ねることもできますが
ブラウザによって表示が異なります。
記述例
--- CSSの記述 ---
/* 左マージンを指定 */
P.mlef{
margin-left:45px;
background-color:#ffb6c1;
}
--- HTMLの記述 ---
<P class="mlef">←に45pxのマージンを指定</P>
ブラウザで表示
★右マージンを指定する
書式 margin-right:幅
右マージンの幅を指定します。
負の値を指定することも可能で、負の値を利用して複数の領域を重ねることもできますが
ブラウザによって表示が異なります。
記述例
/* 右マージンを指定 */
P.mrig{
margin-right:53px;
background-color:#deb887;
}
--- HTMLの記述 ---
<P class="mrig">53pxのマージンを指定→</P>
ブラウザで表示
★マージンを一括指定する
書式 margin:幅や高さ(半角スペースで区切って複数指定可能)
マージンを一括指定します。
値１つの場合：上下左右のマージンが一括指定されます。
２つの場合：記述した順に上下・左右にマージンが指定されます。
３つの場合：記述した順に上・左右・下にマージンが指定されます。
４つの場合：記述した順に上・右・下・左にマージンが指定されます。
記述例
--- CSSの記述 ---
/* 上下左右に30pxのマージン */
P.mar1{
margin:30px;
background-color:#90ee90;
}
/* 上下30px 左右20pxのマージン */
P.mar2{
margin:30px 20px;
background-color:#90ee90;
}
/* 上30px 左右25px 下50pxのマージン */
P.mar3{
margin:30px 25px 50px;
background-color:#90ee90;
}
/* 上30px 左20px 下50px 右15pxのマージン */
P.mar4{
margin:30px 20px 50px 15px;
background-color:#90ee90;
}
/* 上下左右に25pxのマージンと上下左右15pxのパディング */
P.mar5{
margin: 25px;
padding: 15px;
background-color:#90ee90;
}
--- HTMLの記述 ---
<P class="mar1">上下左右に30pxのマージン</P>
<HR>
<P class="mar2">上下30px 左右に20px</P>
<HR>
<P class="mar3">上30px 左右25px 下50px</P>
<HR>
<P class="mar4">上30px 左20px 下50px 右15px</P>
<HR>
<P class="mar5">25pxのマージンと15pxのパディング</P>
ブラウザで表示
上下左右に30pxのマージン
上下30px 左右に20px
上30px 左右25px 下50px
上30px 左20px 下50px 右15px
25pxのマージンと15pxのパディング
