CSS Box Model

What is the Box Model?

The CSS Box Model is the foundation of web layout. Every element on a web page is represented as a rectangular box, which determines how much space it takes up and how it interacts with other elements.

Core Components

• Content — The actual text, images, or media inside the box.
• Padding — Transparent space inside the border, surrounding the content.
• Border — An outline that goes around the padding and content.
• Margin — Transparent space outside the border, creating distance between elements.

Example Syntax

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid #ec4899;
  margin: 15px;
}