margin

マージン（レイアウトとボックスモデル）

意味余白

marginとは？

marginは、要素の外側にある余白の幅を設定するプロパティです。これにより、要素間の距離を調整し、レイアウトを整えることができます。marginには上下左右の4つの方向があり、それぞれ個別に設定することも、一括で設定することも可能です。

marginの具体的な使い方

異なる方向の余白を設定する例

<style>
    .box {
        margin: 20px 15px 10px 5px;
        background-color: tomato;
    }
</style>

<div class='box'>
    このボックスには指定された余白があります。
</div>

クラス名'box'が指定された要素に対して、異なる方向の余白を設定しています。

要素を水平方向に中央揃えする例

<style>
    .box {
        margin: 10px auto;
        width: 200px;
        background-color: tomato;
    }
</style>

<div class='box'>
    この要素は水平方向に中央揃えされています。
</div>

marginにautoを使用して要素を水平方向に中央揃えしています。

marginに関するよくある質問

Q. marginの値の順序は？

A. 4つの値を指定する場合、上、右、下、左の順です。1つの値なら全方向、2つなら上下と左右、3つなら上、左右、下の順になります。

Q. 負のmarginは使える？

A. はい、負の値を使用できます。要素を通常の位置から引き寄せる効果があります。ただし、レイアウトが崩れる可能性があるので注意が必要です。

Q. marginとpaddingの違いは？

A. marginは要素の外側の余白、paddingは要素の内側の余白です。marginは他の要素との間隔を開けるのに使い、paddingは要素の内容と境界線との間隔を開けるのに使います。

Q. marginの相殺とは？

A. 垂直方向に隣接する要素のmarginは、大きい方の値に相殺されます。これはmargin collapsingと呼ばれ、意図しないレイアウトの原因になることがあります。

marginが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのmarginやborder-right、width、float、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。