根据孩子的大小+保证金展开父div 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>