CSS顯示塊屬性保證金問題

有時我在div（display：block）上使用margin並且不能正常工作，但是對於inline-block的工作，我的疑問是爲什麼？在這種情況下，保證金是否以相同的方式工作？CSS顯示塊屬性保證金問題

我知道我可以使用.box margin-top，.box + box margin-top等......但這不是問題。

.box { 
 
    border: 1px solid #500; 
 
} 
 
.block-div-margin { 
 
    margin: 10px 0; 
 
    display: block; 
 
    /*default div state*/ 
 
} 
 
.inline-block-div-margin { 
 
    display: inline-block; 
 
    margin: 10px 0; 
 
} 
 
.my-div { 
 
    padding: 20px; 
 
    background: #EAEAEA; 
 
    border-bottom: 1px solid #999; 
 
} 
 
.my-other-div { 
 
    background: #D3E1E1; 
 
    padding: 0 20px 20px 20px; 
 
} 
 
.my-other-div-content { 
 
    margin-top: 20px; 
 
} 
 
.my-div-inline-block { 
 
    display: inline-block; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
}

<h2>Example 1</h2> 
 
<h3>block-div-margin</h3> 
 
<div class="container"> 
 
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, nobis.</div> 
 
    <div class="block-div-margin"></div> 
 
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, delectus!</div> 
 
    <div class="block-div-margin"></div> 
 
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, quasi.</div> 
 
    <div class="block-div-margin"></div> 
 
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, id!</div> 
 
</div> 
 

 
<h3>inline-block-div-margin</h3> 
 
<div class="container"> 
 
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, nobis.</div> 
 
    <div class="inline-block-div-margin"></div> 
 
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, delectus!</div> 
 
    <div class="inline-block-div-margin"></div> 
 
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, quasi.</div> 
 
    <div class="inline-block-div-margin"></div> 
 
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, id!</div> 
 
</div> 
 

 
<h2>Example 2</h2> 
 
<h3>This is more common issue that I see ever</h3> 
 
<div class="my-div"> 
 
    This is my-div content 
 
</div> 
 
<div class="my-other-div"> 
 
    <div class="my-other-div-content"> 
 
    This is my-other-div-content 
 
    </div> 
 
</div> 
 

 
<h3>With div inline-block</h3> 
 
<div class="my-div"> 
 
    This is my-div content 
 
</div> 
 
<div class="my-other-div my-div-inline-block"> 
 
    <div class="my-other-div-content"> 
 
    This is my-other-div-content 
 
    </div> 
 
</div>

即使與其他元素中的元素，增加保證金的時候，這是因爲如果我在父元素，而不是在孩子補充保證金。