css stack divs each other

Question

我似乎無法弄清楚。我已經看到了所有的例子和問題，但我不能讓這些div彼此靠近。

他們有1px的邊框，由於某種原因，邊框將div移到右邊和底部。

我知道如果我禁用邊框，那麼所有在線代碼工作正常，但我需要這些虛線和他們，divs不再對齊。 Z-index不起作用，藍色的div不顯示ontop。

https://jsfiddle.net/x1L2jxnx/14/

<style> 
    .content { 
     width: 64px; 
     height: 64px; 
     margin: 32px; 
     background-color: #FFD800; 
     position: relative; 
    } 

    .content div { 
     width: inherit; 
     height: inherit; 
     position: absolute; 
     border-style: dotted; 
    } 

    .margin { 
     border-color: #03A9F4; 
     z-index: 3; 
    } 

    .border { 
     border-color: #black; 
     z-index: 2; 
    } 

    .padding { 
     border-color: #808080; 
     z-index: 1; 
    } 
</style> 

<div class="content"> 
    <div class="margin"> 
    <div class="border"> 
     <div class="padding"> 

     </div> 
    </div> 
    </div> 
</div> 

Answer 1

我想這是你想要的。 width描述了你的<div>的內部寬度。邊框的寬度位於其上方。因此，每個<div>都具有其繼承寬度的兩倍邊框寬度。

.content { 
 
    width: 64px; 
 
    height: 64px; 
 
    margin: 32px; 
 
    background-color: #FFD800; 
 
    position: relative; 
 
} 
 

 
.content div { 
 
    top:0; 
 
    bottom:0; 
 
    right:0; 
 
    left:0; 
 
    position: absolute; 
 
    border-style: dotted; 
 
} 
 

 
.margin { 
 
    border-color: #03A9F4; 
 
    z-index: 3; 
 
} 
 

 
.border { 
 
    border-color: #black; 
 
    z-index: 2; 
 
} 
 

 
.padding { 
 
    border-color: #808080; 
 
    z-index: 1; 
 
}

<div class="content"> 
 
    <div class="margin"> 
 
    <div class="border"> 
 
     <div class="padding"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>