# CSS Box Model

The box-model is how the browser views EVERY element on a webpage. It is made up of a series of 4 nested boxes. In the center is the content box that holds all the text or images in your element.

Around that is the padding box. The padding is used to create space between the content and the border. The padding area will display the same background as the content area. The only values you need to provide for the padding are the widths.

Around the padding box is the border box. For the border you need to provide three things - a width, a style, and a colour.

The last layer, around the border, is the margin box. The margin box is used to create space between elements. Its background is always transparent.

p {
  padding: 1rem 2rem;
  border: 1px dashed #333;
  margin: 2rem;
  width: 200px;
  height: 100px;
  line-height: 20px;
  min-width: 200px;
  min-height: 100px;
  max-width: 200px;
  max-height: 100px;
  overflow: hidden;
  box-sizing: content-box;
}

Above is the list of elements that can also interact with or affect the sizes or calculation of the size of the various layers of the box model.