Synopsis

Our grid of 81 cells is currently a single column of 81 html <input> tags. We need to add style to these arrange them into a 9x9 grid, with proper borders around each cell and group of cells. First, we need to understand the CSS box model, and how we can manipulate padding, borders, and margin to get closer to what we want the page to look like.

We start by entering simple HTML to display an input control, then make adjustments to change the dimensions of the control to be square, centered, with a single border around it.

Takeaways

• The Box Model consists of Content, Padding, Border, and Margin
• Use CSS to manipulate the properties of the box model
• Margin Overlaps, that is, the margins around two touching boxes merge into the widest margin
• Border, Padding, and Content do not overlap