Having vertical margin errors when I remove the border property

<div id="container">    
        <div id="big">
            <div class="small red">
            	<div class="small orange">
                    <div class="small blue">
                    	  <div class="small magenta"></div>
                    </div>
                </div>
            </div>
        </div>
</div>

#container{
	width:60%;
	margin:auto;
}
 
#big{
	width:50em;
	height:50em;
 
	border:2px solid Black;
 
	margin:0 auto;
 
	background-color:Black;
 
	position:relative;
}
 
.small{
	width:50%;
	height:50%;
 
	border:1px solid black;
 
	margin:auto;
	margin-top:25%;
}
 
.red{
	background-color:red;
}
 
.orange{
	background-color:orange;
}
 
.blue{
	background-color:blue;
}
 
.magenta{
	background-color:magenta;
}