CSS Box Models

  • All HTML elements can be considered as boxes.
  • It consists of: margins, borders, padding, and the actual content.
The image below illustrates the box model:

Explanation of the different parts:
  • Content The content of the box, where text and images appear.
  • Padding Clears an area around the content. The padding is transparent.
  • Border A border that goes around the padding and content.
  • Margin Clears an area outside the border. The margin is transparent.
The box model allows us to add a border around elements, and to define space between elements.