CSSマージンを定義する方法

#要素の境界線を囲む空白はマージンです。マージンを設定すると、要素の外側に追加の「空白」が作成されます。

マージンを設定する最も簡単な方法は、任意の長さ単位、パーセンテージ値、または負の値を受け入れる margin プロパティを使用することです。

CSSマージン属性。

margin プロパティは、ピクセル、インチ、ミリメートル、または em など、任意の長さの単位を受け入れます。

マージンは自動に設定できます。より一般的な方法は、マージンの長さの値を設定することです。次の宣言では、h1 要素の各辺に 1/4 インチ幅のマージンを設定します。

h1 {margin : 0.25in;}

次の例では、長さの単位を使用して、h1 要素の 4 つの辺に異なるマージンを定義します。ピクセル ( px):

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

パディングの設定と同じです。これらの値の順序は、上マージン (上部) から始まり、要素を中心に時計回りに回転します:

margin: top right bottom left

さらに、マージンのパーセンテージ値を設定することもできます。

p {margin : 10%;}

パーセンテージは、親要素の幅を基準にして計算されます。上の例では、p 要素のマージンを親要素の幅の 10% に設定します。

マージンのデフォルト値は 0 であるため、マージンの値が宣言されていない場合、マージンは表示されません。

ただし、実際には、ブラウザは多くの要素にあらかじめ決められたスタイルを提供しており、マージンも例外ではありません。

たとえば、CSS をサポートするブラウザでは、マージンによって各段落要素の上下に「空行」が生成されます。

したがって、p 要素に対してマージンが宣言されていない場合、ブラウザは独自にマージンを適用する可能性があります。もちろん、明示的に宣言している限り、デフォルトのスタイルはオーバーライドされます。

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