CSS3: margin-left プロパティ - 左側の余白設定(要素外側)

■ 概要

項  目説  明
記述形式 セレクタ {margin-left: }
値 の形式 数値 (長さ,%) | auto
初 期 値 0
対応ブラウザー C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 すべての要素 (テーブルの行の組,ヘッダの組,フッタの組,コラムの組とコラムを除く)
継  承 しない

■ 解説

margin は,要素外側の余白であり,要素とその外側にある他の要素との間の余白(マージン)を設定します。 この要素が他の要素に含まれている場合は,含んでいる要素の内容領域の境界とこの要素の境界との間に,ここで指定した余白が取られます。

margin-leftプロパティ要素左側の余白 を指定するために使用します。

数値による margin の指定は,次のような単位を付けて可能です。

単位説  明
px
px とは画面の1画素(ピクセル) のサイズを1とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。
em
em とは現在使用中の標準フォントの高さを1とする単位です。 
ex
ex とは現在使用中の標準フォントの小文字の「x」の高さを1とする単位です。
親要素の widthプロパティ の値を基準にして割合を%値で指定します。

また,"auto" を指定すると,余白が自動調整されます。

■ 使用例( margin-left プロパティの利用)

以下の例では,<div class="loose"> 要素は,テーブルのセルの領域に対して,上に3文字,右に5文字,下に2文字,左に1文字の間隔が確保されております。 同様の形式と値で padding プロパティを指定した場合と比較してみてください。

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!-- 
   div.loose { margin-top:3em; margin-right:5em;
               margin-bottom:2em; margin-left:1em ; 
               background-color: #CC99CC }
   td.backgrnd { background-color: #99CC99; width:41.8em; }
-->
</style>
HTML
<body> ~ </body>
 <table>
  <tr>
   <td class="backgrnd">
    <div>
     <div class="loose">
      ああああああああああああああああああああああああああああああああああああああ
      ああああああああああああああああああああああああああああああああああああああ
      ああああああああああああああああああああああああああああああああああああああ
      ああああああああああああああああああああああああああああああああああああああ
      ああああああああああああああああああああああああああああああああああああああ
      ああああああああああああああああああああああああああああああああああああああ
     </div>
    </div>
   </td>
  </tr>
 </table>

ブラウザー 表示例
ああああああああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああああああああ

■ 備考

【参考ページ】