To begin, we create “boxes” by setting a specified width and height. However, setting an area with only these properties will give us a space to contain content (say color or text) so-wide by so-high, but little else. We cannot control placement, cushion, or relationship to other boxes without giving the stylesheet more information.

Luckily, there’s pretty standard CSS template for getting started:

CSS

.my-box {
  width: ;
  height: ;
  border: ;
  padding: ;
  margin: ;
}

This template is known as the “Box Model.” In HTML and CSS, we imagine elements as boxes with certain properties. Specifically, every block element in HTML has a border, padding, and margin. These properties should be familiar to you, as we have used them already in this course to style some of our HTML elements.

We will go over the tricks and trades of the “box model” over this topic, as well as other techniques you can use to control the appearance of your content.