HTML にネストされた div の無効なマージンに対する解決策

div がネストされているときに margin が機能しない問題の解決策を次に示します。

さて、マージンの定義と使い方を学んでみましょう。

Div ネストされた HTML コード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル タイプ="text/css">
        *{
            マージン: 0;
            パディング: 0;
        }
        体{
            幅: 100%;
            高さ: 100%;
            背景色: ドジャーブルー;
        }
        。箱{
            幅: 300ピクセル;
            高さ: 300px;
            マージン: 30px;
            背景色: グレー;
        }
        .box .child{
            幅: 200ピクセル;
            高さ: 200px;
            マージン: 50px;
            背景色:ダークターコイズ;
        }
    </スタイル>
</head>
<本文>
    <div class="box">
        <div class="child">

        </div>
    </div>
</本文>
</html>

実際の効果:

これは実際には私たちが望んでいる効果ではありません。まず、この問題が発生する理由について説明しましょう。

ネストされた div が 2 つあります。外側の div の親要素の padding 値が 0 の場合、内側の div の margin-top または margin-bottom 値が外側の div に「転送」されます。

この問題を解決するには、まず IE 固有のプロパティである haslayout を理解する必要があります。

私たちが達成したい効果は次のとおりです。

最後に、解決策についてお話ししましょう。

1. 親要素にブロックフォーマットコンテキスト（ブロックレベルフォーマットコンテキスト、Baiduで学ぶことができます）を生成させます。次のプロパティを実現できます。

フロート: 左/右

位置: 絶対

表示: インラインブロック

オーバーフロー: 非表示/自動

2. 親要素に境界線またはパディングを追加する

方法 1 の overflow:hidden を例に挙げます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル タイプ="text/css">
        *{
            マージン: 0;
            パディング: 0;
        }
        体{
            幅: 100%;
            高さ: 100%;
            背景色: ドジャーブルー;
        }
        。箱{
            幅: 300ピクセル;
            高さ: 300px;
            マージン: 30px;
            背景色: グレー;
            オーバーフロー: 非表示;
        }
        .box .child{
            幅: 200ピクセル;
            高さ: 200px;
            マージン: 50px;
            背景色:ダークターコイズ;
        }
    </スタイル>
</head>
<本文>
    <div class="box">
        <div class="child">

        </div>
    </div>
</本文>
</html>

最終結果:

これで、HTML で div がネストされているときにマージンが機能しない問題を解決する方法についての記事は終わりです。HTML で div がネストされているときにマージンが機能しないという問題に関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: ウェブページのエンコードにおける GB2312、GBK、UTF-8 の違い

>>: CSS3 でテキストの点滅効果を実現する 3 つの方法サンプルコード