CSSマージンは何をするのでしょうか？

まず、margin が何を意味するのかを知る必要があります。 margin 属性は、1 つのステートメントですべての margin 属性を設定するための CSS の省略形属性であり、各要素間の距離を制御するために使用されます。それらは透明で目に見えません。

margin 属性には、margin left: 左の要素ブロックからの距離 ( 内側のマージン からの距離を設定); margin 属性には、上 (上部) の要素ブロックからの距離 (最上位の要素ブロックからの距離を設定) が含まれます。 margin right: 右側の要素ブロックからの距離 (右側の要素ブロックからの距離を設定); margin

bottom

: 下部の要素ブロックの距離 (下側(下)の要素ブロックからの距離を設定)。その二次元構造図は、CSS 属性の二次元図で見ることができます。 margin left の使用法:

margin-left

:10px; これは、左の要素ブロックから 10 ピクセルを意味し、その後に (margin-left:10%; 左の要素ブロックからの 10% の距離) のようなパーセンテージを続けることができます。 css margin-left チュートリアル ;margin right の使用法:

margin-right

:10px; これは、右側の要素ブロックから 10 ピクセルを意味し、その後に (margin-right:10%; 10% distance) のようなパーセンテージを続けることができます。右側の要素ブロックから); margin top の使用法:

margin-top

:10px; これは、先頭の要素ブロックから 10 ピクセルを意味し、その後に (margin-top:10%; 10%) のようなパーセンテージを続けることができます。一番上の要素ブロックからの距離) css margin-top; marginbottom の使用法:

margin-bottom

:10px; これは、(margin-bottom: 10%; 一番下の要素ブロックからの 10% の距離) css margin-bottom ;

距離の値を設定するときは、「:」を使用して値を代入します。末尾は「;」で、すべて半角小文字を使用します。

左右両方のマージン値を設定する必要がある場合は、CSSを最適化するために省略形で実装できます。

たとえば、略語は次のとおりです:

margin:10px; これは、上下左右の要素ブロック間の距離が 10px (10 ピクセル) であることを意味し、margin-top:10px; と同じになります。 bottom:10px; margin-left:10px; margin-right:10px ; 同じ効果の略語

margin:5px 10px; は、上の要素ブロックと下の要素ブロックの間の距離を意味します。 right 要素ブロックは 10px、margin-bottom:5px、margin-right :10px と同じ効果を意味します。上の要素ブロック間の距離は 5px、下の要素ブロック間の距離は 7PX、左右の要素ブロック間の距離は 6px で、margin-top:5px に等しいです。 left:6px; margin-right:6px; 同じ効果の略語

margin:5px 6px 7px 8px; 上の要素のブロックの距離は 6 ピクセル、下の要素のブロックの距離は 7 ピクセルです。左側の要素のブロック距離は 8px で、 margin-top:5px; margin-bottom:7px; margin-right:8px と同じ効果を使用する方法がたくさんあります。 CSS の margin 属性。必要な友人はそれを保存できます。このサイトの他の更新にも引き続き注目してください。

関連書籍:

さまざまな基本的なグラフィックを描画するための CSS3 のヒント

HTML と CSS の作成 QQ ペンギンのチュートリアル

これらの CSS 原則を理解していますか?

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