CSSマージンとは何ですか？ CSSマージンプロパティの概要-CSSチュートリアル-php.cn

CSSマージンとは何ですか？ CSSマージンプロパティの概要

不言

リリース： 2018-09-30 10:30:42

オリジナル

6634 人が閲覧しました

CSS を学習していたときに、CSS マージンの概念について学びました。それでは、CSS マージンとは何でしょうか。境界線の外側はマージンです。マージンはデフォルトで透明なので、その背後にある要素はブロックされません。次に、この記事では CSS のマージン属性の関連内容を紹介します。

まず、css の margin 属性は margin であることを知っておく必要があります。

margin は、周囲 (外側の境界線) の要素領域をクリアします。余白には背景色がなく、完全に透明です。

margin は、要素の上下左右のマージンを個別に変更することも、すべての属性を一度に変更することもできます。

CSS マージン属性値が何に対応しているかを図で見てみましょう:

CSSマージンとは何ですか？ CSSマージンプロパティの概要

CSS マージン属性値は最大 4 つまで指定できます。それぞれ上マージン、右マージン、下マージン、左マージンです。上マージン、左右マージン、下マージンを示す 3 つにすることもできます。上下のマージン、左右のマージンを示す 2 つにすることもできます。少なくとも 1 つ: は四辺余白を示します。

CSS のマージン属性値は auto にすることができ、ブラウザーはマージンを自動的に計算し、ブロックレベルの要素は水平方向に中央に表示されます。属性値はパーセンテージにすることができ、パーセンテージは幅に基づいて計算されます。親要素。属性値は CSS の長さの単位にすることができ、値は負の値にすることができます。属性値は継承可能です。

次に、css margins の実装を直接見てみましょうコード

注: css margin 属性のデフォルト値は 0 です。 margin が値を宣言した場合、マージンは表示されません。

css マージンの実装コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
p{
    background-color:yellow;
}
p.margin{
    margin:2cm 4cm 3cm 4cm;
}
</style>
</head>
<body>
<p>没有指定外边距大小</p>
<p class="margin">有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距</p>
</body>
</html>

ログイン後にコピー

css マージンの実装 効果は次のとおりです:

CSSマージンとは何ですか？ CSSマージンプロパティの概要