CSSマージン（余白）

CSS Margin (マージン)

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

Margin

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

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

マージン

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

マージンの設定例:

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

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

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

割り当ての省略形

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です

ヒント

要素に背景属性を設定する場合、外側の余白(margin)には背景を配置できませんが、内側の余白(padding)には背景を配置することができます。

Padding

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

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