<p>The CSS box model is a way of describing the layout and sizing of HTML elements on a web page. It consists of four parts: the content area, padding, border, and margin.</p>
<p><img src="https://www.washington.edu/accesscomputing/webd2/student/unit3/images/boxmodel.gif" alt="Illustration of the box model, showing (from inside to out) content, padding, border, and margin" class="image--center mx-auto" /></p>
<ul>
<li><p>Content area: This is the innermost part of the box, and it contains the actual content of the element, such as text, images, or other HTML elements.</p>
</li>
<li><p>Padding: This is the space between the content area and the border. It can be used to create space between the content and the border or to add a background color to the element.</p>
</li>
<li><p>Border: This is the line that surrounds the content area and padding. It can be used to create a visible boundary around the element or to separate it from other elements on the page.</p>
</li>
<li><p>Margin: This is the space between the border and the next element on the page. It can be used to create space between elements or to center an element on the page.</p>
</li>
</ul>
<p>The size of the box itself is calculated like this:</p>
<table><tbody><tr><td><p><strong>Width</strong></p></td><td><p>width + padding-left + padding-right + border-left + border-right</p></td></tr><tr><td><p><strong>Height</strong></p></td><td><p>height + padding-top + padding-bottom + border-top + border-bottom</p></td></tr></tbody></table>

The CSS box model is a way of describing the layout and sizing of HTML elements on a web page. It consists of four parts: the content area, padding, border, and margin.

![Illustration of the box model, showing (from inside to out) content, padding, border, and margin](https://www.washington.edu/accesscomputing/webd2/student/unit3/images/boxmodel.gif align="center")

* Content area: This is the innermost part of the box, and it contains the actual content of the element, such as text, images, or other HTML elements.
    
* Padding: This is the space between the content area and the border. It can be used to create space between the content and the border or to add a background color to the element.
    
* Border: This is the line that surrounds the content area and padding. It can be used to create a visible boundary around the element or to separate it from other elements on the page.
    
* Margin: This is the space between the border and the next element on the page. It can be used to create space between elements or to center an element on the page.
    

The size of the box itself is calculated like this:

<table><tbody><tr><td colspan="1" rowspan="1"><p><strong>Width</strong></p></td><td colspan="1" rowspan="1"><p>width + padding-left + padding-right + border-left + border-right</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Height</strong></p></td><td colspan="1" rowspan="1"><p>height + padding-top + padding-bottom + border-top + border-bottom</p></td></tr></tbody></table>

Width	width + padding-left + padding-right + border-left + border-right
Height	height + padding-top + padding-bottom + border-top + border-bottom

CSS Box Model