title: How do I make my element inherit width & height?
body: <p>Stackers. I'm trying to get my box class to actually become a box. I want the box class to have a height and width of 10em of the  font-size. So for instance the boxes should have heights and widths of 12px * 10 em.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--
       Your name does here
       The date goes here
       CISC 131
  
       A short description of the project goes here
  --&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;this will appear on the tab in the browser&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;script src="tictactoe.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
  *{
      border  : 0;
      margin  : 0;
      padding : 0;
  }
  
  body
  {
      font-family : "Times New Roman";
      font-size   : 12px;
      width       : 33em;
      padding-top : 5em;
      text-align  : center;
      margin-left : auto;
      margin-right: auto;
  }
  .square
  {
      font-size   : 8em;
      text-align  : center;
      float       : left;
      height      : 10em;
      width       : 10em;
      background-color: red;
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="gameBoard"&gt;
  &lt;div class"square" id="box0"&gt;dwda&lt;/div&gt;
  &lt;div class"square" id="box1"&gt;wadawd&lt;/div&gt;
  &lt;div class"square" id="box2"&gt;&lt;/div&gt;
  &lt;div class"square" id="box3"&gt;&lt;/div&gt;
  &lt;div class"square" id="box4"&gt;&lt;/div&gt;
  &lt;div class"square" id="box5"&gt;&lt;/div&gt;
  &lt;div class"square" id="box6"&gt;&lt;/div&gt;
  &lt;div class"square" id="box7"&gt;&lt;/div&gt;
  &lt;div class"square" id="box8"&gt;&lt;/div&gt;
  &lt;div id="ticTacToeBoard"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>