検索

ホームページ  >  に質問  >  本文

html - margin-top について質問する

リーリー

理解できない質問があります。
1.html では、p は h1 をラップしており、h1 にはマージントップがあります。h1 のマージントップが実装されるのではなく、p の外側にバーストするのはなぜですか? p 内のマージン?
2. p での実装方法。ありがとうございます。

コードデモ
リンクの説明

高洛峰高洛峰2843日前1986

全員に返信(3)返信します

  • 高洛峰

    高洛峰2017-05-19 10:49:56

    この質問は何度も寄せられていますので、参考にさせてください
    MDN-collapsing margins
    Collapsing margins

    返事
    0
  • PHPz

    PHPz2017-05-19 10:49:56

    jasonintjuの答えに従って、それを整理します:
    子要素のmargin-topが親要素よりも大きいため、子要素のmargin-topを直接使用します

    ブロック レベルの親要素とその最初/最後の子要素
    ブロック レベルの親要素に、上ボーダー、上パディング、インライン コンテンツ、クリア フロートの 4 つの属性がない場合 (上ボーダーと上パディングについては、また、上マージンと上パディング幅が 0 の場合、このブロックレベル要素の上マージンとその最初の子要素は「互いに近い」と言えます。このとき、ブロックレベルの親要素とその最初の子要素の上マージンが結合されます。つまり、このとき親要素が表示するマージンがそのまま親要素とその最初の子要素になります。子要素の margin-top の値。
    同様に、ブロックレベルの親要素の margin-bottom とその最後の子要素の margin-bottom が親のボーダー、パディング、インラインコンテンツ、高さ、最小高さ、最大高さによって分離されていない場合要素を選択すると、マージンのマージが発生します。

    引用: https://developer.mozilla.org...

    返事
    0
  • 仅有的幸福

    仅有的幸福2017-05-19 10:49:56

    pとh1を分離し、pにパディングまたはボーダーを設定するだけです

    返事
    0
  • キャンセル返事