全てはボックスから始まる？！　～マージンとパディングを操ろう～

全てはボックスから始まる？！　～マージンとパディングを操ろう～

　スタイルシート（ＣＳＳ）では、すべての要素に「ボックス」と呼ばれる四角形の領域があり、以下の４つの部分から構成されています。

• 内容領域（テキスト部分）
• 余白（パディング/padding）　ーテキストと枠線の間
• 枠線（ボーダー/border）
• マージン（margin）　ー枠線の外側

　ボーダーの外側がマージン、内側がパディングと覚えてしまいましょう。繰り返しますが、「ボックス」はすべての要素に存在しますので、「ボックス」を理解することがスタイルシートを習得するため　の重要な第一歩になります。

マージンとパディングを設定してみよう！

　上（TOP）、下（BOTTOM）、左（LEFT）、右（RIGHT）それぞれのプロパティの値を下図のように個別に指定することができます。上下左右を書く順番はありません。

上から時計回りにまとめて値を書ける！

　時計周りに「上」、「右」、「下」、「左」の値をまとめて下図のように指定することができます。それぞれの値は半角スペースで区切り、必ず「上」から始まる時計回りになります。

「上下」と「左右」の値をまとめて書ける！

　「上下」と「左右」の値をまとめて設定することができます。下図の例では、上下のマージンを「10px」、左右のマージンを「30px」に設定しています。必ず「上下」を先に記述することと、「上下」と「左右」の間に半角スペースを入れるのがポイントです。

「上下左右」を同じ値にする場合は？

　上下左右を同じ値に設定するには、下図のように値を一つだけ記述します。