CSS マージン

❮ 前章へ 次章へ ❯

CSS Margin Properties

CSS margin プロパティは、要素の周りにスペースを生成するために使用します。

マージン・プロパティは、ボーダーの外側における空白のサイズを設定します。

この要素のマージンは 80px です。

CSS マージン

CSS マージン・プロパティは、ボーダーの外側における空白のサイズを設定します。

注: マージンは、完全に透明です - 且つ、背景色を設定できません！

CSS を使用すると、余白を完全に制御できます。要素の各サイド（上、右、下、左）にマージンを設定するための CSS プロパティがあります。

マージン - 各サイド個別

CSS には、要素の各サイドのマージンを指定するためのプロパティがあります：

すべてのマージンプロパティには、次の値を指定できます：

注: コンテンツをオーバラップさせるため、マイナス値も使用できます。

次の例は、<p> 要素の周りに異なったマージンを設定します：

例

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
Try it Yourself ❯

次の例は、左マージンを親要素から継承します：

例

div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}
Try it Yourself ❯

マージン - ショートハンド・プロパティ

コードを短くするために、1 つのプロパティで全てのマージンプロパティを指定することが可能です。

全マージンプロパティのショートハンドプロパティは "margin" です:

margin プロパティは 次の全ての個別マージンプロパティに対するショートハンド・プロパティです：

例

p {
    margin: 100px 150px 100px 80px;
}
Try it Yourself ❯

それがどう動作するかを以下に示します：

margin プロパティに 4 つの値を指定した場合：

margin プロパティに 3 つの値を指定した場合：

margin プロパティに 2 つの値を指定した場合：

margin プロパティに 1 つの値を指定した場合：

auto 値の使用

横方向にコンテナ内の要素をセンタリングするために、marginプロパティに auto を設定することができます。

要素は、指定された幅を取った後で、残りのスペースは左右のマージンに均等して分割されます：

例

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}
Try it Yourself ❯

練習問題で確認テスト！

Exercise 1 ❯  Exercise 2 ❯  Exercise 3 ❯  Exercise 4 ❯

全ての CSS マージンプロパティ

プロパティ 説明
margin 1 回の宣言で全てのマージンプロパティを設定するためのショートハンド・プロパティ
margin-bottom 要素の下マージンを設定する
margin-left 要素の左マージンを設定する
margin-right 要素の右マージンを設定する
margin-top 要素の上マージンを設定する

❮ 前章へ 次章へ ❯