子のサイズ+マージンに基づいて親divを拡大する

Question

現在、div1の中にdiv2があり、両方に同じサイズがあります。 div2に枠線/余白を追加したいが、div2のサイズを減らさず、div1のサイズを拡大する。

どうすればいいですか？

Answer 1

外側容器はwidthとheightプロパティを必要としません。この場合、子要素（.div2）にmarginがある場合、外部コンテナ（.div1）が展開されます。より良く理解するためのコード例を参照してください:)

.div1 { 
 
    border: 4px solid #111; 
 
    width: auto; /* remove width */ 
 
    height: auto; /* remove height */ 
 
    display: inline-block; /* make it more flexible */ 
 
} 
 

 
.div2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: cyan; 
 
} 
 

 
.div2.with-margin { 
 
    margin: 20px; 
 
}

<div class="div1"> 
 
    <div class="div2"></div> 
 
</div> 
 
<div class="div1"> 
 
    <div class="div2 with-margin"></div> 
 
</div>