CSSの余白の重なりを解決する方法まとめ

この記事では、CSS のマージンオーバーラップに関する詳細な説明を主にいくつかの解決策を紹介します。編集者がそれを共有し、参考にさせていただきます。エディターをフォローして見てみましょう

今日はCSSを使用してマージンの重なりを防ぐいくつかの方法を整理しました

まず一連のdom構造を想定しましょう

<p class="parent">
    <p class="child">
    </p>
</p>

通常、子要素にマージンを設定すると、 , この属性は親要素にも同じ効果をもたらしますが、実際には子要素にマージンを設定するだけなので、どうすればよいでしょうか。

(1) 親要素にボーダーを設定します

.parent { 
    width: 300px;       
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

(2) 親要素にpaddingを追加します

.parent {
    padding： 1px;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

(3) 上記に幅と高さを指定した兄弟要素を追加します子要素には幅と高さがあることを覚えておいてください。

<p class="parent">
     <p style="width: 20px;height: 20px;margin-top: "></p>
     <p class="child">
     </p>
</p>

(4) 親要素に overflow: hidden; 属性を設定します

.parent {
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

(5) 子要素に display: inline-block を設定します (子要素がインライン要素またはインラインのブロックレベル要素にはマージンが重なるという問題はありません)

.parent {
    width: 300px;
    height: 300px;
} 
.child {
    width: 200px;
    height: 200px;
    margin: 20px; 
    display: inline-block;
}

(6) これを実現するには、フローティングなど、ドキュメントフローからサブ要素を切り離す方法がたくさんあります。絶対位置などについてはここでは詳しく説明しません。

以上がCSSの余白の重なりを解決する方法まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。