CSSでマージンを使用する方法

CSS の margin 属性は、上下左右の 4 つの方向を含む、要素の周囲の空白領域を制御するために使用されます。構文は次のとおりです。 [

CSS でのマージンの使用

margin プロパティは、要素の周囲の空白領域を制御するために使用され、親要素に対する相対的な要素の外部スペースを設定できます。

構文

<code>margin: <length | auto> [<length | auto> [<length | auto> [<length | auto>]]]</code>

パラメータ

• : ピクセル (px)、センチメートル (cm)、インチ (in) などの単位で指定されるサイズ値。
• : ブラウザのデフォルト値に従ってマージンを自動的に設定します。

4 つのマージン値

margin 属性では、要素の周囲のさまざまな方向の空白を制御する 4 つの個別の値を指定できます:

1. margin-top: 要素の上の空白を制御します。
2. margin-right: 要素の右側の空白スペースを制御します。
3. margin-bottom: 要素の下の空白を制御します。
4. margin-left: 要素の左側の空白スペースを制御します。

単一のマージン値を設定する

単一のマージン値のみを設定するには、パラメータを指定できます。例:

<code>margin: 20px;</code>

これにより、要素の周囲に 20 ピクセルの空白が追加されます。

複数のマージン値を設定する

複数のマージン値を設定するには、複数のパラメーターを指定できます。例:

<code>margin: 10px 20px 30px 40px;</code>

これは要素に対して次のように指定します:

• top: 10px
• right: 20px
• bottom: 30px
• left: 40px

auto キーワードを使用します

auto キーワードはブラウザーに次のように指示します。マージン値を自動的に計算します。これは、特定の状況で役立ちます。例:

<code>margin: auto;</code>

これにより、要素が親要素内で水平方向の中央に配置されます。

以上がCSSでマージンを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。