Почему - ХЗ, а исправить можно так
<!DOCTYPE html>
<html>
<head>
<title>JS</title>
</head>
<style>
body{
margin: 0;
}
#contaner{
margin: 0;
padding: 0;
}
.wrapper{
margin: 0;
padding: 0;
height: 32px;
}
.first{
width: 30px;
height: 30px;
background: green;
display: inline-block;
margin: 1px;
padding: 0;
}
.main{
width: 30px;
height: 30px;
background: blue;
display: inline-block;
margin: 1px;
padding: 0;
}
span{
width: 30px;
}
</style>
<body>
<div id="contaner"></div>
</body>
<script type="text/javascript">
var stop = 5;
var cntr = document.getElementById("contaner");
for(var i=0; i<stop; i++){
var wrap = document.createElement("div");
wrap.className = "wrapper";
cntr.appendChild(wrap);
for(var j=0; j<stop; j++){
var first = document.createElement("div");
first.className = "first";
wrap.appendChild(first);
first.innerText = '\n';
if(j == 3){
first.innerText = j;
}
}
}
</script>
</html>