css stack divs on top of each other

Question

I cant seem to figure it out. I have seen all examples and questions, but i cant get those divs ontop of each other.

They have and border of 1px and for some reason the border shifts the divs to the right and bottom.

I know if i disable the borders then all the code online works just fine, but i need those dotted lines and with them, the divs dont align anymore. Z-index doesnt work, the blue div doesnt show 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

I assume this is what you want. The width describes the inner width your <div> has. The border width comes on top of it. So every <div> has additional twice the border width to its inherited width.

 .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>