The Box Model

The CSS Box Model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

css

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

Always use box-sizing: border-box; to include padding and border in the element's width.

3 / 16

Current Path

CSS3

Jump to topic:

The CSS Box Model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

css

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

Always use box-sizing: border-box; to include padding and border in the element's width.

3 / 16