CSS入門 | CSSボックスモデル | Margin

Margin

marginプロパティは、borderと隣接する要素の間隔であるmargin領域のサイズを設定する。 このmargin領域はpadding領域とは異なり、background-colorプロパティで設定する背景色の影響を受けない。 CSSを使うと、margin領域のサイズを方向ごとに個別に設定できる。

marginプロパティ

CSSでは、HTML要素のmargin領域を設定するために次のプロパティを提供する。

marginプロパティ値を負の値に設定して、該当要素をほかの要素の上に重ねることもできる。

<style>
div.mar {
    margin-top: -25px;
    margin-right: 10px;
    margin-bottom: 30px;
    margin-left: 100px;
}
</style>

marginプロパティ値をinheritに設定すると、親要素のmarginプロパティ値をそのまま継承する。

<style>
    div.parent { height: 100px; margin-left: 100px; }
    div.child { background-color: #FFF8DC; margin-left: inherit; }
</style>

marginの省略表記

すべてのmarginプロパティを使ったスタイルを1行で設定できる。

<style>
    div.four { margin: 20px 50px 30px 50px; }
    div.three { margin: 20px 50px 30px; }
</style>

4つのmargin値を持つ場合は、top、right、bottom、leftの順に設定する。 例: margin: 10px 20px 30px 40px;

これは次の4行のコードと同じ意味を持つ。

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

3つのmargin値を持つ場合は、top、rightとleft、bottomの順に設定する。 例: margin: 10px 20px 30px;

これは次の4行のコードと同じ意味を持つ。

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;

2つのmargin値を持つ場合は、topとbottom、rightとleftの順に設定する。 例: margin: 10px 20px;

これは次の4行のコードと同じ意味を持つ。

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

1つのmargin値を持つ場合は、すべてのmargin値を同じ値に設定する。 例: margin: 10px;

これは次の4行のコードと同じ意味を持つ。

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

margin値にautoを使う理由

marginプロパティ値をautoに設定すると、Webブラウザーが水平方向のmargin値を自動で設定する。 つまり、該当HTML要素の左と右のmarginが自動で設定される。 その結果、その要素はそれを含んでいる親要素のちょうど中央に配置される。

<style>
    div {
        border: 2px solid teal;
        width: 300px;
        margin: auto;
    }
</style>