Margin
マージンは、要素と要素の余白を指定します。
余白ですから、マージンの背景は透明で色を塗ることはできません。
−値で要素と要素を重ね合わせることもできます。
●関連プロパティ
絶対値での指定
マージンの値を、絶対値で指定します。
{ margin : length in | length cm | length mm | length pt | length pc | length px }
<p style="margin-top: 20px; background-color: rgb(255,128,0); color: rgb(255,255,255);">Margin Top 20px</p>
|
Margin Top 20px |
相対値での指定
マージンを相対値で指定します。
テキストの場合、文字の大きさを1emとして、計算されています。
{ margin : length em }
<p style="margin-top: 1em; font-size: 20px; background-color: rgb(255,128,0); color: rgb(255,255,255);">Margin Top 1em</p>
|
Margin Top 1em |
<p style="margin-left: 2em; font-size: 20px; background-color: rgb(255,128,0); color: rgb(255,255,255);">Margin Left 1em</p>
|
Margin Left 1em |
パーセントでの指定
マージンをパーセントで指定します。
パーセント場合、親要素のサイズとの相対値で計算されます。
{ margin-top : Percentage }
<p style="margin-bottom: 10%; font-size: 20px; background-color: rgb(255,128,0); color: rgb(255,255,255);">Margin Top 10%</p>
|
Margin Top 10% |
<p style="margin-right: 20%; font-size: 20px; background-color: rgb(255,128,0); color: rgb(255,255,255);">Margin Right 20%</p>
|
Margin Right 20% |
自動で指定
Autoで自動にマージンを指定します。
Autoを組み合わせて指定しますと、サンプルのような表示になります。
{ margin-top : Auto }
<p style="margin: auto auto 20px auto; font-size: 20px; background-color: rgb(255,128,0); color: rgb(255,255,255);">Margin-top: Auto. Margin-bottom: 20px. margin-left: Auto. Margin-right: Auto.</p>
|
Margin-top: Auto. Margin-bottom: 20px. margin-left: Auto. Margin-right: Auto. |
<p style="margin: auto auto auto 40px; font-size: 20px; background-color: rgb(255,128,0); color: rgb(255,255,255);">Margin-top: Auto. Margin-bottom: Auto. margin-left: 40px. Margin-right: Auto.</p>
|
Margin-top: Auto. Margin-bottom: Auto. margin-left: 40px. Margin-right: Auto. |
<p style="margin: auto; font-size: 20px; background-color: rgb(255,128,0); color: rgb(255,255,255);">Margin-top: Auto. Margin-bottom: Auto. margin-left: Auto. Margin-right: Auto.</p>
|
Margin-top: Auto. Margin-bottom: Auto. margin-left: Auto. Margin-right: Auto. |
上マージンの指定
要素の上部マージンを指定します。
サンプルは、わかりやすくするためテキストの背景に色を塗りました。上から10px余白を取った場合です。背景画像の罫線ピッチは10pxです。
{ margin-top : Absolute Size | Relative Size | Percentage | auto }
<p style="margin-top: 10px; background-color: rgb(255,128,0); color: rgb(255,255,255);">Margin Top 10px</p>
|
Margin Top 10px |
下マージンの指定
要素の下部マージンを指定します。
{ margin-bottom : Absolute Size | Relative Size | Percentage | auto }
<p style="margin-bottom: 20px; background-color: rgb(255,128,0); color: rgb(255,255,255);">Margin Bottom 20px</p>
|
Margin Bottom 20px |
左マージンの指定
要素の左部マージンを指定します。
{ margin-left : Absolute Size | Relative Size | Percentage | auto }
<p style="margin-left: 30px; background-color: rgb(255,128,0); color: rgb(255,255,255);">Margin Left 30px</p>
|
Margin Left 30px |
右マージンの指定
要素の右部マージンを指定します。
{ margin-right : Absolute Size | Relative Size | Percentage | auto }
<p style="margin-right: 40px; background-color: rgb(255,128,0); color: rgb(255,255,255);">Margin right 40px</p>
|
Margin right 40px |
マージンの指定
要素の4方向のマージンを指定します。
指定には、全指定と簡略指定の4種類あります。
{ margin : top right bottom left | [ top ] [ right left ] [ bottom ] | [ top bottom ] [ right left ] | [ top bottom right left ] }
<p style="margin: 10px 20px 15px 30px; background-color: rgb(255,128,0); color: rgb(255,255,255);">Margin 10px 20px 15px 30px</p>
|
Margin 10px 20px 15px 30px |
要素の重ね合せ
マージンの数値を−にすると、要素と要素が重なります。
<p style="margin: 0px 0px -14pt; font-size: 24pt;
font-weight: bold; color: rgb(255,128,0);">Dynamic</p>
<p style="margin: 0px 0px 0px 40px; font-size: 18pt; font-weight:
bold; color: rgb(102,102,255);">HTML Styling</p>
Dynamic
HTML Styling
 |
 |
|---|
