The Box Model

Box Model Diagram

This diagram represents the box model. Every HTML-element, whether it's a <p> or an <h1>, has these invisible boxes around them for the designer to manipulate with CSS.

Box Model In Everday HTML & CSS

Here is an example of an <h1> and a <p> with some CSS styling:

Here are the same elements with the box model exposed:

After you have gained a good sense of what the box model looks like, you can then enter the world of CSS styling with confidence.