*{box-sizing: border-box}
body{text-align: center;}
#black{
  display: inline-block;
  position: relative;
  background-color:black;
  width: 400px;
  height: 400px;

}

#white1{

  background-color: white;
  width: 100px;
  height: 100px;
  margin-left:0px;
  margin-top: 0px;
}
#white2{

  background-color: white;
  width: 100px;
  height: 100px;
  margin-left:200px;
  margin-top: -100px;
}
#white3{

  background-color: white;
  width: 100px;
  height: 100px;
  margin-left:100px;
  margin-top: 00px;
}
#white4{

  background-color: white;
  width: 100px;
  height: 100px;
  margin-left:300px;
  margin-top: -100px;
}
#white5{

  background-color: white;
  width: 100px;
  height: 100px;
  margin-left:0px;
  margin-top: 0px;
}
#white6{

  background-color: white;
  width: 100px;
  height: 100px;
  margin-left:200px;
  margin-top: -100px;
}
#white7{

  background-color: white;
  width: 100px;
  height: 100px;
  margin-left:100px;
  margin-top: -00px;
}
#white8{

  background-color: white;
  width: 100px;
  height: 100px;
  margin-left:300px;
  margin-top: -100px;
}