The box model is the foundation of web design. It is a simple way of understanding how HTML elements are positioned on a web page.

The box model consists of four boxes:

The content box is the innermost box and contains the text and other content of the element.

The padding box is the box around the content box. It is used to add space between the content box and the surrounding elements.

The border box is the box around the padding box. It is used to add space between the padding box and the surrounding elements.

The margin box is the box around the border box. It is used to add space between the border box and the surrounding elements.

The following example shows how the box model works:

The content box is the blue box. The padding box is the green box. The border box is the red box. The margin box is the yellow box.

The following HTML code creates the same example:

The following CSS code is used to create the same example:

div {

width: 100px;

height: 100px;

border: 1px solid black;

padding: 10px;

margin: 10px;

}

h1 {

font-size: 24px;

}

p {

font-size: 12px;

}