CSSマージンのプロパティとは何ですか?それらの用途は何ですか? (詳しい説明)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSマージンのプロパティとは何ですか?それらの用途は何ですか? (詳しい説明)

藏色散人

Aug 30, 2018 pm 02:36 PM

Web ページをレイアウトするとき、ページのデザインを行ったことのある友人は、マージン属性が CSS の非常に重要なスタイル属性であることを知っていると思います。それでは、マージン属性とは何なのかと疑問に思う初心者もいるかもしれません。

CSS スタイルのマージンは、CSS の外側のマージンと間隔の属性であり、div ブロックまたは要素間の上下左右の距離を制御します。明らかに、CSS におけるマージンの役割を過小評価することはできません。。この記事では、cssのmarginプロパティの具体的な使い方を初心者向けに紹介します。お役に立てれば幸いです。

以下では、具体的なコード例を通して詳しく説明します

CSSのマージン属性、つまりCSSマージン属性の具体的な使用コード例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css中的margin属性使用示例</title>
    <style>
        .demo{
            width: 300px;height: 100px;
            background-color: #ccccff;
        }
        .demo1{
               margin-left:50px;
               margin-top: 50px;
               margin-bottom: 50px;
               width: 300px;height: 100px;
               background-color: #b2ecef;
           }
        .demo2{
            width: 300px;height: 100px;
            background-color: #94ef9a;
        }
        .demo1 p{margin-left: 50px;
     }
     </style>
</head>
<body>
<div class="demo">
    <p>没有给这个div块设置margin值</p>
</div>
<div class="demo1">
    <p>给这个div块设置了margin值,并且给此段文字也设置margin值</p>
</div>
<div class="demo2">
    <p>没有给这个div块设置margin值</p>
</div>
</body>
</html>

ログイン後にコピー

ブラウザでの上記のコードの効果は次のとおりです。

CSSマージンのプロパティとは何ですか?それらの用途は何ですか? (詳しい説明)

この図から、要素のマージン値を設定した後、div ブロック間の間隔が変化することがわかります。 div ブロックのデモ 1 では、margin-left の style 属性を設定した後、要素はブラウザの左側から 50 ピクセル移動し、margin-top を設定した後、要素は上の div ブロックからも 50 ピクセル移動して、 margin-bottom スタイル属性は、div ブロックの上の境界線を下に 50 ピクセル移動し、div ブロックのデモ 1 はこれを使用して上、左、下のマージンを生成します。同時に、テキストの 2 番目の段落に margin-left スタイル属性も追加した後、テキストは、demo1 の div の左境界線から 50 ピクセル移動し、外側のマージンが作成されました。

マージンの値は上下左右から選択できます。もちろん、この属性を div に直接追加しても上記の効果を得ることができます。デフォルトでマージンに値を 1 つだけ追加すると、それは 4 辺すべての距離の同じ値と同等になるためです。または、margin: 50px 50px 50px 50px; を追加します。これは、CSS の細分化された margin-top、margin-bottom、および margin-left に相当します。右、下、左は時計回りの方向です。

それでは、上記はcssスタイルのmargin属性、つまりcssのmargin属性の具体的な使い方の紹介です。これが必要な友人に役立つことを願っています。

以上がCSSマージンのプロパティとは何ですか?それらの用途は何ですか? (詳しい説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。