CodePath - HTML & CSS Learning Platform

The CSS Box Model

All HTML elements can be considered as boxes. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Try it yourself:

HTML

<h1>Hello CSS!</h1>\n<div class='box'>Style me!</div>

CSS

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Result