ボックスモデルのサイズの詳細な説明は、パディング、マージン、境界の値によって異なります。

ボックスモデルは、要素ボックスの幅と高さ、パディング、境界線、余白のサイズを指定します。境界線の内側の空白はパディング、境界線の外側の空白はマージンです。以下に示すように、ボックスモデル要素ボックスの幅 = コンテンツ領域の幅 + 2 (パディング + マージン + 境界線)、つまり、この例の要素の幅は 170px です。CSS では、幅と高さはコンテンツ領域の幅と高さを指すことに注意してください。パディング、境界線、余白を大きくしてもコンテンツ領域のサイズには影響しませんが、要素のボックスの全体的なサイズは大きくなります。 (ブラウザで表示する場合は、コンソールF12を開いて対応する要素をクリックして表示することを忘れないでください)

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ボックス モデルのサイズは、パディング、マージン、境界の値によって決まります</title>
    <スタイル タイプ="text/css">
        div{
        パディング: 10px;/*パディング*/
        マージン: 20px;/*マージン*/
        マージン: 10px 20px 30px 40px;/*上 10px 右 20px 下 30px 左 40px*/
        margin: 10px 20px;/*上、下、左、右*/
        margin: 10px 20px ;/*上下は異なる、左右は同じ*/
        マージン: 10px 20px 30px;/*マージン*/
        境界線: 5px 赤実線;/*境界線*/
        width: 100px;/*コンテンツエリアの幅100*/
        height: 100px;/*コンテンツエリアの高さ 100*/
    }
    /*ボックスサイズ値 = 2 (パディング + 境界線 + マージン)*//*div のサイズ*/
    </スタイル>
</head>
<本文>
    <div>たくさんの本を読んでもスクリプト全体を学ぶことはできません。もっと練習が必要です。 </div>
</本文>
</html>

マージンであれパディングであれ、それらは時計回りに配置され、上、右、下、左に値が定義されます。たとえば、margin:10px 10px 10px 10pxは、ボックスの上、下、左、右に10pxのマージンが追加されることを意味します。つまり、margin:10px; marigin:10px 10px;上、下、左、右のマージンは10pxです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>いわゆるバグのマージンが実は重なっているのですが、どう解決すればいいのでしょうか</title>
    <スタイル タイプ="text/css">
    .box1,.box2{
        幅: 200ピクセル;
        高さ: 200px;
        マージン: 10px 20px;
        背景色: 赤;
    }
    </スタイル>
</head>
<本文>
    <div class="box1">機能仕様に操作性が存在しない</div>
    <div class="box2">ソフトウェアは再利用する前に使用可能でなければなりません。 </div>
</本文>
</html>

通常の考え方では、上記のコードの 2 つのボックスの上下の間隔は 20px の隙間があるはずですが、実際にはコンソールで確認すると 10px しかなく、もう 10px は明らかに重なっています。2 つのボックスの margin 値を調整すると、上下の間隔が最大値の 20px を取ることがわかります (margin が等しい要素が最大値を取る)。解決策: 1. float2 は要素構造 display: inline-block を変更します。また、margin がネストされている場合、つまり親子関係にある場合は、重なり合って隙間がないことがわかります。では、margin によって引き起こされるこれらの問題をどのように解決すればよいでしょうか。解決策: ボックスに蓋がないため、両端をコンテンツで埋める方法を見つけます。border、padding、overflow: hidden を使用できます。ボックスモデルは、その後の Web サイトのレイアウトにとって非常に重要であり、Web サイトの正確な配置に役立ちます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>マージンによって発生するバグの解決</title>
    <スタイル タイプ="text/css">
    /* .box1,.box2{
        幅: 200ピクセル;
        高さ: 200px;
        背景色: 赤;
    } */
    /* .box1{
        マージン: 10px 20px;
    }
    .box2{
        マージン: 20px 10px;
    }
    .box3{
        マージン: 20px 10px;
    }
    .box4{
        マージン: 10px 20px;
    } */

    /* ボックスモデルのレベル設定によって発生する問題の解決策: 1. float 2. display: inline-block 3. 最大値を直接書き込んで、同じレベルで最大マージンを取る*/
    div{
        /* 浮動小数点数: 左; */
        表示: インラインブロック;
        幅: 1200ピクセル;
    }
   .box1{
        マージン: 10px 20px;
    }
    .box2{
        マージン: 80px 10px;
    }

    /* ボックス モデルの水平ネストによって発生する問題の解決方法: ボックスに蓋がないので、両端をコンテンツで埋める方法を見つけます。border、padding、overflow:hidden を使用できます。上部と下部をテキストで埋めます */
    p{
        幅: 800ピクセル;
    }
    .box3,.box4{
        マージン: 30px;
    }
    .box3{
        背景色: 緑;
        /* border:1px solid red*//*親要素に境界線を追加*/
        padding: 10px; /*親要素にパディングを追加*/
        /*overflow: hidden;*//*余分な部分を非表示にするには、overflow:hidden を追加します。これにより、余分な部分がすべて切り取られます*/
    }
    .box4{
        表示: ブロック;
        背景色: 緑黄色;
    }
    </スタイル>
</head>
<本文>
    <div class="box1">機能仕様に操作性が存在しない</div>
    <div class="box2">ソフトウェアは再利用する前に使用可能でなければなりません。 </div>
    <p class="box3">
        <!-- シンプルさは複雑さに先行するのではなく、複雑さの後に来ます。 -->
        <span class="box4">過去のコードはテストされていないコードです。 </span>
        <!-- 最初になるか、最高になるか -->
    </p>
</本文>
</html>

これで、ボックスモデルのサイズがパディング、マージン、ボーダーの値によってどのように変化するかについての説明は終わりです。パディング、マージン、ボーダーの値の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Linux ドライバ開発でよく使われる関数 copy_from_user open read write の詳細な説明

>>: Nodejs プラグインと使用方法の概要