CSSボックスの説明 - 高さに影響を与える内側の余白と外側のコンテナの境界

Question

div要素のいずれかから境界線スタイルを削除し、次にdiv要素の高さから境界線スタイルを削除すると、全体的なボックスは影響を受けますか？ 誰かが私のためにこれを説明できますか？

<div style="background-color:red;border:1px solid black;"> 
    <div style="margin:10px;background-color:blue;border:1px solid black;"> 
     <p style="margin:30px;background-color:gray;border:1px solid black;">test</p> 
    </div> 
</div> 

皆さんはこれをシミュレートできますか？ボーダースタイルを削除すると高さが変わるのですか？ 誰かがこの上にいくつかの光を当てることを願って 多くの感謝！

Answer 1

高さ（および幅）は、CSSの幅、高さ（または幅）、マージン、およびパディングの合計によって決まります。それはCSSボックスモデルと呼ばれ、W3Schoolsの詳細はexplanationです。

Answer 2

境界線を追加すると、指定したピクセル数が要素の外側に追加されます。その意味で、要素の高さが変更されます。

それは、それが固定された高さを持っていない場合、divの高さに影響します。