CSS Box Model

What is the CSS Box Model?

The CSS Box Model is a box that wraps around every HTML element. It consists of the following parts:

• Content: The actual content inside the box (text, images, etc.).
• Padding: Clears an area around the content, inside of the border.
• Border: A border surrounding the padding (if any). It can be customized with colors, thickness, and style.
• Margin: Clears space around the element's border, separating it from other elements.

CSS Box Model Example

The box above has the following properties:

• Width: 200px
• Height: 200px
• Padding: 20px
• Border: 10px solid black
• Margin: 20px

By default, the width and height only include the content area. When padding, border, and margin are applied, the total size of the box will be larger than the specified width and height unless you use the box-sizing: border-box; property.

Understanding box-sizing

In CSS, the default value of box-sizing is content-box, meaning the width and height of an element only apply to the content area. If you want the width and height to include the padding and border, you need to use box-sizing: border-box;.