In CSS, the term "box model" is used when talking about design and layout.
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. The image below illustrates the box model:
<ul>
<li>Padding - Clears an area around the content. The padding is transparent
</li>
<li>Border - A border that goes around the padding and content
</li>
<li>Content - The content of the box, where text and images appear
</li>
<li>Margin - Clears an area outside the border. The margin is transparent
</li>
</ul>
EXAMPLE -&gt;
div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; }

In CSS, the term "box model" is used when talking about design and layout.

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. The image below illustrates the box model:

*   **Padding** - Clears an area around the content. The padding is transparent
    
*   **Border** - A border that goes around the padding and content
    
*   **Content** - The content of the box, where text and images appear
    
*   **Margin** - Clears an area outside the border. The margin is transparent
    

EXAMPLE -&gt;

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

CSS Box Model