CSS Margin (マージン)

CSS Margin (マージン) プロパティは、要素の周囲のスペースを定義します。

Margin

marginは、要素の周囲の領(lǐng)域（外側(cè)の境界線）をクリアします。マージンには背景色がなく、完全に透明です

マージンは要素の上下左右のマージンを個別に変更できます。すべてのプロパティを一度に変更することも可能です。

マージン

マージンは、境界線を囲む余分な「空白」であり、透明で目に見えません。値は、浮動小數(shù)點數(shù)と単位識別子で構(gòu)成される長さの値またはパーセンテージです。

マージンの設(shè)定例:

dev{ margin: 5px 2px 5px 2px; }

この例では、div要素のマージンを「top-right-bottom-left」から「5px 2px 5px 2px」に設(shè)定します。設(shè)定順序は上から時計回りに実行します。値が 1 つだけ設(shè)定されている場合は、上下左右の辺に適用されます。

この屬性は値「auto」を取ることもできます。これは、システムがデフォルト値を割り當(dāng)てることを意味します。

割り當(dāng)ての省略形

dev{ margin: 5px 2px 5px 2px; }

は次のように省略できます:

dev{ margin: 5px 2px }

この例では、下のマージンと右マージンが欠落している場合、システムは自動的に上マージン値を下マージン値として使用し、右マージン値を左マージンとして使用します。

margin 屬性には 1 ～ 4 つの値を指定できます。 /p>

margin:25px 50px 75px 100px;

上マージンは25px

右マージンは50px

下マージンは75px

左マージンは100px

margin:25px 50px 75px;

トップmargin 25px

左右のマージンは50pxです

下のマージンは75pxです

margin: 25px 50px;edgeマージンはすべて25pxです

ヒント

要素に背景屬性を設(shè)定する場合、外側(cè)の余白(margin)には背景を配置できませんが、內(nèi)側(cè)の余白(padding)には背景を配置することができます。

Padding

Paddingとは、要素の境界線とコンテンツの間の部分を指します。値は、浮動小數(shù)點數(shù)と単位識別子で構(gòu)成される長さの値またはパーセンテージですが、負(fù)の値にすることはできません。

Padding は複合屬性でもあり、padding-top、padding-right、padding-bottom、padding-left の 4 つの側(cè)面のパディングを個別に設(shè)定することもできます。パディングの使用法はマージンの使用法と似ていますが、ここでは詳しく説明しません。マージンの構(gòu)文を參照してください。