HOME >> スタイルシート > マージンを指定する

point マージンを指定する

margin:
指定できる値
スタイルシートでの単位指定
数値にptなどの単位をつけて指定する
キーワードで指定
auto
パーセントで指定
値の指定方法個別に設定するプロパティ
値が一つ上下左右同じ設定margin-top上のみ設定
値が二つ上下、左右の設定margin-left左のみ設定
値が三つ上と左右と下の設定margin-right右のみ設定
値が四つ上、右、下、左の順で設定margin-bottom下のみ設定
marginプロパティを使えば、ボックス周りにマージン(余白)を設定することが出来ます。
ページ全体や段落の左右などに適度に余白を入れて、見やすいページレイアウトにすることが出来ます。値の指定は、数値にptなどの単位をつけて指定したり、パーセントやキーワードのauto(自動的にマージンを設定)で指定します。
このプロパティも値を複数設定することで、それぞれの方向の余白を設定することが出来ます。また、marinプロパティに「-top」などのキーワードを追加した、margin-topプロパティ(上のマージンのみ設定)を使えば、左右上下それぞれの方向のマージンを個別に設定することが出来ます。
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

この段落の
上下左右のマージンは、25pxです。


この段落の
上下左右のマージンは、50pxです。

ソース
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
P      {background-color:orange;}
.test1  { margin: 25px;  }
.test2  { margin: 50px; }
-->
</STYLE>
</HEAD>
<BODY>
<P class="test1">この段落の<BR>
上下左右のマージンは、25pxです。</P>
<HR>
<P class="test2">この段落の<BR>
上下左右のマージンは、50pxです。</P>
</BODY>
</HTML> 
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

上と下に50px
左と右に20pxのマージンを指定


上に10px、
左右に20px、下に50pxのマージンを指定


左のみに
50pxのマージンを設定

ソース
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
P     {background-color:orange;}
.test1  { margin: 50px 20px;     }
.test2  { margin: 10px 20px 50px;}
.test3  { margin-left: 50px; }
-->
</STYLE>
</HEAD>
<BODY>
<P class="test1">上と下に50px<BR>
左と右に20pxのマージンを指定</P>
<HR>
<P class="test2">上に10px、<BR>
左右に20px、下に50pxのマージンを指定</P>
<HR>
<P class="test3">左のみに<BR>
50pxのマージンを設定</P>
</BODY>
</HTML> 
Copyright ©2001〜2011 まさぼ〜 All Right Reserved