CSS Box Model

Every HTML element is essentially a rectangular box made up of four layers:

1. Content – text or image inside the box
2. Padding – space between content and border
3. Border – the edge around the box
4. Margin – space outside the border, separating it from other elements

Example:

<style>
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid blue;
  margin: 15px;
  background-color: lightyellow;
}
</style>

<div class="box">This is a box model example.</div>

The total width of the element = content width + left/right padding + left/right border + left/right margin.

Practice Task:
Create a card with padding, border, margin, and border-radius to understand spacing visually.