マージン

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 35/76。

CSSにおいて、marginは要素の周囲、つまり定義された境界線の外側にあるスペースのことです。これはボックスモデルのもう一つの重要な要素です。マージンは要素間に余白を作り、要素同士を離すために使用されます。

要素の4つの側面（上、右、下、左）のマージンを、個別に、またはショートハンド記法を使用して制御できます。

marginプロパティを使用するための基本的な構文は以下の通りです：

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

margin-top: 要素の上側のマージン。
margin-right: 要素の右側のマージン。
margin-bottom: 要素の下側のマージン。

margin-left: 要素の左側のマージン。
value: 指定したいマージンの値。ピクセル (px)、エム (em)、パーセンテージ (%)、またはその他の有効なCSS単位で指定できます。

また、ショートハンド（簡略記法）を使用して、4辺すべてのマージンを一度に設定することもできます。例えば以下のようになります：

p {
    margin: 20px; /* 4辺すべてに同じマージンを適用します */
}

div {
    margin: 10px 25px; /* 上下のマージンを10pxに、左右のマージンを25pxに設定します */
}

.button {
    margin: 15px 30px 10px 5px;/* 各辺のマージンを個別に設定します */
}

この例では、すべての <p> 要素はすべての辺に 20px のマージンを持ち、すべての <div> 要素は上下に 10px、左右に 25px のマージンを持ちます。また、button クラスを持つすべての要素は、上に 15px、右に 30px、下に 10px、左に 5px のマージンを持ちます。

チャレンジ

簡単

見出し（<h1>）と区分（<div>）が含まれるHTMLドキュメントが与えられます。あなたのタスクは、marginプロパティを使用して、これらの要素の周囲にスペースを追加することです。以下の手順に従ってください：

<h1>要素をターゲットにするCSSルールを記述してください。すべての側のmarginを20pxに設定します。
<div>要素をターゲットにするCSSルールを記述してください。上下のmarginを10pxに、左右のmarginを30pxに設定します。

チートシート

margin プロパティは、境界線の外側にある要素の周囲に余白を作成します。4つの側面すべてのマージンを個別に制御することも、ショートハンド記法を使用することもできます。

個別のマージンプロパティ:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

ショートハンド記法:

/* すべての側面に同じマージン */
margin: 20px;

/* 上下: 10px、左右: 25px */
margin: 10px 25px;

/* 上: 15px、右: 30px、下: 10px、左: 5px */
margin: 15px 30px 10px 5px;

自分で試してみよう

<html>
<head>
    <title>Margins</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">Mastering CSS Margins</h1>
    <div style="border:2px solid black;">Margins create space around elements.</div>
</body>
</html>