English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS基本チュートリアル

CSSボックスモデル

CSS3基本教程

CSS 参考マニュアル

CSS @ルール(RULES)

CSS マージン(外边距)

マージンは、境界線の周囲の領域をクリアし、他のフレームと分けることができます。

CSSの外側マージン属性

CSSのマージン属性を使用すると、要素のフレームの両側のマージンを設定できます。マージンは、境界線の周囲の領域をクリアし、他のフレームと分けることができます。background-color、それは完全に透明です。

各辺のマージンを設定する

CSSの個別のmargin属性を使用して、要素の異なる側(例えば、上、右、下、左)に異なる外側マージンを指定することができます。

h1 {margin-bottom: 20px;}
p {margin-left: 10px;margin-right: 30px;}
テストをしてみる‹/›

簡略化記号マージン属性

margin属性は、それぞれの外側マージンを個別に設定することを避けるために使用される簡略化記号属性です:margin-top、margin-right、margin-bottomおよびmargin-left。

h1 { margin: 0 10px;}
p {margin: 25px 50px 75px 100px;}
テストをしてみる‹/›

この記号は、一つ、二つ、三つ、または四つのスペースで区切られた値を取ることができます。

  • 設定された場合一つの値、それらをすべての四つの側面に適用します。

  • 指定された場合二つの値、最初の値が上と下に、二つ目の値が右と左に適用されます。

  • 指定された場合三つの値、最初の値が上に、二つ目の値が左と右に、最後の値が下に適用されます。

  • 指定された場合四つの値、それらを指定された順序で上、右、下、左にそれぞれ適用します。