CSS 外部マージンの使用方法の詳細な説明

高洛峰
リリース: 2017-03-16 11:06:17
オリジナル
1575 人が閲覧しました

この記事では、CSS マージンの使用について詳しく説明します


文法: [ auto

]{1,4} | default value:各独立したattribute

は、すべての要素に適用されます。 アニメーション プロパティ : はい

計算値 : それぞれの独立したプロパティを見てください

関連プロパティ

: [ margin-top ] || [ margin-right ] || [ margin- Bottom ] || [ margin-left]

Value:

auto: 横書き (デフォルト) モードでは、margin-top/margin-bottom の計算値は 0、margin-left/ margin -right は利用可能なスペースに依存します。詳細については、マージン シリーズのキーワード auto を参照してください。長さの値を使用して外側のパディングを定義します。負の値も可能です

: 外側のパディングを定義するにはパーセントを使用します。横書き (デフォルト) モードでは、計算のためにそのブロックを含むブロック

width

を参照します。それ以外の場合は、負の値になる可能性がある height を参照します。 説明:

拡張された辺を取得または設定します。

オブジェクト

の距離。
  • 4つのパラメータ値をすべて指定すると、上、右、下、左の順に4つの辺に適用されます。
  • 1枚のみご用意の場合は4面全てに使用します。
  • 2つある場合、1つ目は上下用、2つ目は左右用となります。

  • 3つある場合、1つ目は上用、2つ目は左右用、3つ目は下用となります。

非置換インライン要素は、この属性を使用して、外側のパッチを左側と右側に設定できます。外側のパッチを上側と下側に設定したい場合は、まずオブジェクトをブロックレベルとして表示する必要があります。またはインラインブロッククラス。

拡張された余白は常に透明です。

  • いくつかの隣接するマージンがマージされます。これをマージンフォールディングと呼びます:

  • h2{margin:10px 0;}
    p{margin:20px 0;}
    ......<h2>这是一个标题</h2><p>
        <h2>这是又一个标题</h2></p>本例中,第一个h2的margin-bottom(10px),p的margin-top(20px),第二个h2的margin-top(10px)将被合并,它们之间的margin间隙最后是(20px),即取三者之间最大的那个值。
    ログイン後にコピー

  • 親要素と最初/最後の子要素はマージンをマージします

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート