1. Content, Padding, Border, Margin

The CSS Box Model describes how every element on a web page is structured:

• Content – The actual text, image, or data inside the box.
• Padding – Space between content and border (inside background).
• Border – Surrounds padding and content.
• Margin – Space outside the element, separating it from others.

div {
  width: 200px;
  padding: 20px;
  border: 5px solid blue;
  margin: 15px;
  background: lightyellow;
}

2. Box-sizing (content-box vs border-box)

The box-sizing property controls how width and height are calculated:

• content-box (default) – width/height apply to content only (padding & border add extra space).
• border-box – width/height include content, padding, and border (recommended for layouts).

.content-box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid red;
}

.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid green;
}

3. Outline vs Border

Border is part of the box and affects layout, while Outline sits outside the element and does not affect spacing.

.bordered {
  border: 3px solid blue;
  padding: 10px;
}

.outlined {
  border: 3px solid transparent;
  outline: 3px dashed red;
  padding: 10px;
}

4. Overflow (hidden, scroll, auto)

The overflow property controls how content is handled when it overflows its box.

• visible – Default, content spills out.
• hidden – Extra content is cut off.
• scroll – Always adds scrollbars.
• auto – Adds scrollbars only when needed.

.box {
  width: 150px;
  height: 80px;
  border: 2px solid black;
  margin-bottom: 10px;
}

.hidden { overflow: hidden; }
.scroll { overflow: scroll; }
.auto { overflow: auto; }