margin-top, -bottom, -left, -right

プロパティの説明

margin-***は、上下左右の要素外に余白を指定するプロパティです。要素の外にあるため、背景は適用されません。margin-top：上の余白、margin-bottom：下の余白、margin-left：左の余白、margin-right：右の余白となっています。全ての要素に指定することができます。

指定できる値

CSSで使える数値
20px, 2emなどを指定。
auto
状況に応じて余白を入れます。

widthを指定したブロック要素にmargin-left, -rightの両方にautoを指定すると、センタリングさせることができます。

サンプル

サンプルページ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "https://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <title>サンプルページ</title>
 <style type="text/css">
 <!--
 td{border:solid 2px #999999;}
 .m1{margin-top:40px; background-color:#cccccc;}
 .m2{
 margin-left:auto;
 margin-right:auto;
 border:solid 2px #999999;
 }
 -->
 </style>
</head>

<body>
 <h1>サンプルページ</h1>
 <p class="m1">上に40pxの余白をあけています。</p>
 <table class="m2">
  <tr><td>センタリング</td><td>センタリング</td></tr>
  <tr><td>センタリング</td><td>センタリング</td></tr>
 </table>
</body>

</html>