CSS 入門チュートリアル: margin プロパティ

マージンを設定する最も簡単な方法は、margin 属性を使用することです。たとえば、2 つの DIV ボックスが上下に配置されている場合、マージン スタイルを使用して、上下の 2 つのボックス間の距離を設定できます。 margin プロパティは、ピクセル、インチ、ミリメートル、または em など、任意の長さの単位を受け入れます。マージンは自動に設定できます。より一般的な方法は、マージンの長さの値を設定することです。次のステートメントは、h1 要素の各辺に 1/4 インチ幅のマージンを設定します: h1 {margin : 0.25in;} 以下は、h1 要素の 4 つの辺に異なるマージンと使用される長さの単位を定義します。ピクセル(px)です:

h1 {margin : 10px 0px 15px 5px;}

は内側のマージンの設定と同じです。これらの値の順序は、上マージン(top)から要素を中心に時計回りに回転します。また、マージンのパーセンテージ値を設定することもできます: p {margin : 10%;} これにより、p 要素のマージンが親要素の幅の 10% になります。マージンのデフォルト値は 0 であるため、マージンの値を宣言しない場合、マージンは表示されません。ただし、実際には、ブラウザは多くの要素に対してあらかじめ決められたスタイルを提供しており、マージンも例外ではありません。 margin を使用してデザインを中央に配置する基本的な使用法は次のとおりです: margin:0 auto; オブジェクトを中央に配置しますが、条件が 1 つ必要です。つまり、オブジェクトの上位が text-align:center コンテンツの中央揃え属性スタイルを設定する必要があります。一部のブラウザでは、body タグに text-align:center コンテンツの中央揃えスタイルが設定されていません。ただし、基になるオブジェクトが margin: 0 auto で設定されている場合、レイアウトは主要なブラウザと互換性を持たせるために中央に配置されます。 body: center 属性スタイルに text-align を設定することをお勧めします。

CSS 単一マージン プロパティ

単一マージン プロパティを使用して、要素の片側のマージンの値を設定できます。 p 要素の左マージンを 20px に設定したいとします。次のメソッドを使用できます:

p {margin-left: 20px;}

次の属性のいずれかを使用して、他のマージンに直接影響を与えることなく、対応する要素のマージンのみを設定できます。 margin -top、margin-right、margin-bottom、margin-left
このような一方的な属性を 1 つのルールで複数使用できます。たとえば、次のように記述できます。 } の場合、省略ロジックは依然として up、right、down、left です。

以上がCSS 入門チュートリアル: margin プロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。