✅ Module 4: CSS Box Model (📦🧱)

📦 Module 4: CSS Box Model

The CSS Box Model is a fundamental concept that defines how elements are structured and how spacing works around them. It treats every element on a web page as a rectangular box made up of four main parts: content, padding, border, and margin. Understanding this model is crucial for creating consistent layouts and spacing in your designs. 🎨

🔹 Components of the Box Model

Content: The actual text, image, or element inside the box.
Padding: Clears space around the content inside the element.
Border: Wraps around the padding and content. Can be styled and given a width.
Margin: Clears space outside the border. Used to create space between elements.

📐 Visual Diagram

  +-------------------------+
  |        Margin          |
  |  +-------------------+ |
  |  |     Border        | |
  |  | +---------------+ | |
  |  | |   Padding     | | |
  |  | | +-----------+ | | |
  |  | | | Content   | | | |
  |  | | +-----------+ | | |
  |  | +---------------+ | |
  |  +-------------------+ |
  +-------------------------+

📦 Example


.box {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  margin: 30px;
}

In the above example, the total space occupied by the element is greater than 300px due to the added padding, border, and margin.

⚙️ Box-Sizing Property

The box-sizing property defines how the width and height of an element are calculated.

content-box (default): Width = only content (padding + border are added outside)
border-box: Width includes content + padding + border


* {
  box-sizing: border-box;
}

The border-box model is often preferred in modern design for easier layout control. 🧰

✅ Summary

The box model affects how elements are displayed and spaced.
Understanding each layer helps you manage layout more effectively.
Use box-sizing: border-box for predictable designs. 👍

Study Peak's

✅ Module 4: CSS Box Model (📦🧱)