Box Model Info Sheet

How The Box Model Works

All HTML elements can be considered as boxes. The box model wraps around the element and consists of the margin, border, padding, and content itself.

The box model allows us to add a border around elements, and control the space between them.

Example of styling with the box model:

      .box {
        width: 30%;
        padding: 1em;
        border: 5px solid gray;
        margin: 0;
      }
      

    

The different parts of the box model in more detail:

1. Content - The content of the box, where text and images appear.
2. Padding - Clears an area around the content. The padding is transparent.
3. Border - A border that goes around the padding and content.
4. Margin - Clears an area outside the border. The margin is transparent.