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

Luckily, there’s a 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.

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.