CSSのmargin属性の使い方の詳しい説明-CSSチュートリアル-php.cn

CSSのmargin属性の使い方の詳しい説明

高洛峰

リリース： 2017-03-27 09:40:57

オリジナル

1762 人が閲覧しました

マージンを設定する最も簡単な方法は、margin 属性を使用することです。

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

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

h1 {margin : 0.25in;}

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

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

これらの値の順序は、上マージン (top) から要素を囲むように設定されます。時間ごとのローテーション:

margin: 右上下左

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

p {margin : 10%;}

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

マージンのデフォルト値は0なので、マージンの値を宣言しない場合、マージンは表示されません。ただし、実際には、ブラウザーは多くの要素に対してあらかじめ決められたスタイルを提供しており、マージンも例外ではありません。たとえば、CSS をサポートするブラウザでは、マージンによって各段落要素の上下に「空行」が作成されます。したがって、p 要素に対してマージンが宣言されていない場合、ブラウザは独自にマージンを適用する可能性があります。もちろん、明示的に宣言している限り、デフォルトのスタイルはオーバーライドされます。

値のコピー

覚えていますか?前の 2 つのセクションで値のコピーについて説明しました。ここではバリューコピーの使い方を説明します。

場合によっては、いくつかの値を繰り返し入力します:

p {margin: 0.5em 1em 0.5em 1em;}

値のコピーを使用すると、数値のペアを繰り返し入力する必要がありません。上記のルールは次のルールと同等です:

p {margin: 0.5em 1em;}

これら 2 つの値は、前の 4 つの値を置き換えることができます。これはどのように行われるのでしょうか? CSS では、余白に 4 つ未満の値を指定できるルールが定義されています。ルールは次のとおりです:

左マージンの値が欠落している場合は、右マージンの値が使用されます。

下マージンの値が欠落している場合は、上マージンの値が使用されます。

右マージンの値が欠落している場合は、上マージンの値が使用されます。

以下の画像は、これを理解するためのより直感的な方法を提供します:

言い換えると、マージンに 3 つの値が指定されている場合、4 番目の値 (つまり、左マージン) は 2 番目の値 (右マージン) から変更されます。コピーされました。 2 つの値が指定された場合、4 番目の値は 2 番目の値からコピーされ、3 番目の値 (下マージン) は 1 番目の値 (上マージン) からコピーされます。最後のケースでは、値が 1 つだけ指定されている場合、他の 3 つのマージンはこの値 (上部マージン) からコピーされます。

このシンプルなメカニズムを使用すると、4 つの値をすべて適用する必要はなく、必要な値を指定するだけで済みます。例:

h1 {margin: 0.25em 1em 0.5em;} /* 0.25em 1em 0.5em と同等1em */h2 {margin: 0.5em 1em;} /* 0.5em 1em 0.5em 1em に相当 */p {margin: 1px;} /* 1px 1px 1px 1px に相当 */

これを行うには 1 つの方法があります小さな欠点ですが、最終的には間違いなくこの問題に遭遇します。 p 要素の上と左のマージンを 20 ピクセルに設定し、下と右のマージンを 30 ピクセルに設定するとします。この場合、希望する結果を得るには、

p {margin: 20px 30px 30px 20px;}

と記述する必要があります。残念ながら、この場合、必要な値の数を減らすことはできません。

別の例を見てみましょう。左マージンを除くすべてのマージンを自動にしたい場合 (左マージンは 20px):

p {margin: auto auto auto 20px;}

同様に、これにより希望の効果が得られます。問題は、これらの auto を入力するのが少し面倒なことです。要素の片側のマージンのみを制御したい場合は、single-margin プロパティを使用します。

Single-margin 属性

single-margin 属性を使用して、要素の片側のマージンの値を設定できます。 p 要素の左マージンを 20px に設定するとします。 margin を使用する (多くの auto を入力する必要がある) 代わりに、次のメソッドを使用できます:

p {margin-left: 20px;}

次のプロパティのいずれかを使用して、対応するマージンのみを設定できます。他のすべてのマージンに直接影響を与えません:

margin-top

margin-right

margin-bottom

margin-left

このような複数の片面属性をルールで使用できます。例:

h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}

もちろん、この場合、margin:

p を使用する方が簡単かもしれません。 {マージン: 20 ピクセル 30 ピクセル 30 ピクセル 20 ピクセル;}

片面属性を使用してもマージンを使用しても、結果は同じです。一般的に、複数の辺にマージンを設定したい場合は、マージンを使用する方が簡単です。ただし、ドキュメントの観点から見ると、実際にはどの方法を使用するかは重要ではないため、使いやすい方法を選択する必要があります。

ヒントとメモ

ヒント: Netscape と IE で定義されている body タグのデフォルトのマージン値は 8px です。オペラの場合はそうではありません。対照的に、Opera では内部パディングのデフォルト値を 8px として定義しているため、Web サイト全体の端を調整して Opera で正しく表示したい場合は、本文のパディングをカスタマイズする必要があります。

CSS マージンの例:

<html>
<head>
<style type="text/css">
p.leftmargin {margin-left: 2cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="leftmargin">这个段落带有指定的左外边距。</p>
</body>
</html>

ログイン後にコピー

テキストの右マージンを設定します:

<html>
<head>
<style type="text/css">
p.rightmargin {margin-right: 8cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="rightmargin">这个段落带有指定的右外边距。这个段落带有指定的右外边距。这个段落带有指定的右外边距。</p>
</body>
</html>

ログイン後にコピー

テキストの上マージンを設定します:

<html>
<head>
<style type="text/css">
p.topmargin {margin-top: 5cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="topmargin">这个段落带有指定的上外边距。</p>
</body>
</html>

ログイン後にコピー

テキストの下マージンを設定します:

<html>
<head>
<style type="text/css">
p.bottommargin {margin-bottom: 2cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="bottommargin">这个段落带有指定的下外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>
</html>

ログイン後にコピー

1 つのステートメントですべてのマージンプロパティ:

リーリー

以上がCSSのmargin属性の使い方の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。