CSSのmarginとは?余白の指定方法について
余白は、定義された境界線の外側で、要素の周囲にスペースを作成するために使用されます。
この要素には70pxの余白があります。
CSSマージン
CSSmargin
プロパティは、定義された境界線の外側で、要素の周囲にスペースを作成するために使用されます。
CSSを使用すると、余白を完全に制御できます。要素の各辺 (上、右、下、左) のマージンを設定するためのプロパティがあります。
マージン - 個々の側
CSSには、要素の各辺のマージンを指定するためのプロパティがあります。
margin-top
margin-right
margin-bottom
margin-left
すべてのマージンプロパティは、次の値を持つことができます。
- auto - ブラウザーがマージンを計算します
- 長さ - 余白を px、pt、cm などで指定します。
- % - 包含要素の幅の%でマージンを指定します
- inherit - 親要素からマージンを継承することを指定します
ヒント:負の値を使用できます。
例
<p>要素の4つの辺すべてに異なるマージンを設定します。
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margin - 省略形プロパティ
コードを短くするために、1つのプロパティですべての余白プロパティを指定することができます。
margin
プロパティは、次の個々のmarginプロパティの簡略化されたプロパティです。
margin-top
margin-right
margin-bottom
margin-left
それでは、これがどのように機能するかです。
margin
プロパティに4つの値がある場合
margin: 25px 50px 75px 100px;
- 上のマージンは25px
- 右のマージンは50px
- 下のマージンは75px
- 左のマージンは100px
margin
プロパティに3つの値がある場合
margin: 25px 50px 75px;
- 上のマージンは25px
- 左右のマージンは50px
- 下のマージンは75px
margin
プロパティに2つの値がある場合
margin: 25px 50px;
- 上下のマージンは25px
- 左右のマージンは50px
margin
プロパティに1つの値がある場合
margin: 25px;
- 4つの余白はすべて25pxです
auto値
marginプロパティをauto
に設定して、コンテナ内で要素を水平方向に中央揃えにすることができます。
要素は指定された幅を取り、残りのスペースは左右の余白に均等に分割されます。
継承値
この例では、<p class="ex1">要素の左のマージンを親要素(<div>)から継承できます。
例
継承値の使用
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
すべてのCSSマージンプロパティ
プロパティ |
説明 |
---|---|
margin | 1つの宣言ですべてのマージンプロパティを設定するための簡略プロパティ |
margiin-bottom | 要素の下のマージンを設定します |
margin-left | 要素の左のマージンを設定します |
margin-right | 要素の右のマージンを設定します |
margin-top | 要素の上のマージンを設定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。