marginの使い方

margin

プロパティの説明

marginは、上下左右の余白をまとめて指定することができるプロパティです。全ての要素に指定することができます。

値は半角スペースで区切って4つまで指定することができます。指定した値の個数により、余白の適用される範囲が変わります。

値1つ：上下左右全ての余白を指定します。
値2つ：上下の余白を値1で、左右の余白を値2で指定します。
値3つ：上の余白を値1で、左右の余白を値2で、下の余白を値3で指定します。
値4つ：上の余白を値1で、右の余白を値2で、下の余白を値3で、左の余白を値4で指定します。

指定できる値

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

ブロック要素に margin:0 auto のように左右に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">
 <!--
 .m1{margin:100px; background-color:#cccccc;}
 -->
 </style>
</head>

<body>
 <h1>サンプルページ</h1>
 <p class="m1">上下左右に100pxの余白をあけています。</p>
</body>

</html>