The Web Design Survival Guide | CSS Box Model

by todaly1

HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
  </head>
  <body>
    <div class="box-4">Box 4
     <div class="box-3">Box 3
      <div class="box-2">Box 2
       <div class="box-1">Box 1
        </div>
      </div>
     </div>
    </div>
</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */

     .box-1 {
 width: 90px;
 height: 90px;
 padding: 10px;
 margin-top: 10px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 border: 1px solid #00ffff;
 text-align: center;
 background-color: #000000;
 color: #ffffff;
 font-size: 12px;
 font-family: Helvetica, Arial, "sans-serif";
 }
 .box-2 {
 width: 180px;
 height: 180px;
 padding: 10px;
 margin-top: 10px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 border: 1px solid #00ffff;
 text-align: center;
 background-color: #666666;
 color: #ffffff;
 font-size: 12px;
 font-family: Helvetica, Arial, "sans-serif";
 } 
 .box-3 {
 width: 270px;
 height: 270px;
 padding: 10px;
 margin-top: 10px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 border: 1px solid #00ffff;
 text-align: center;
 background-color: #888888;
 color: #ffffff;
 font-size: 12px;
 font-family: Helvetica, Arial, "sans-serif";
 }
 .box-4 {
 width: 360px;
 height: 360px;
 padding: 10px;
 margin-top: 10px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 border: 1px solid #00ffff;
 text-align: center;
 background-color: #cccccc;
 color: #000000;
 font-size: 12px;
 font-family: Helvetica, Arial, "sans-serif";
 }