📦 CSS Box Model

What is the CSS Box Model?

The CSS Box Model wraps around every HTML element. It’s made of:

Box Model Example

This box uses padding, border, and margin.

💡 Tip: By default, width/height only cover the content area unless you use box-sizing: border-box;.

Understanding box-sizing

The default value is content-box, which means width and height only apply to the content area.

If you use box-sizing: border-box;, padding and border are included in the total size.

.myBox {
  width: 200px;
  padding: 20px;
  border: 10px solid #333;
  box-sizing: border-box;
}

📝 Box Model Quiz

1. Which part is outside of the border?

2. Default value of box-sizing?

3. If you set box-sizing: border-box;, what happens?