2. CSS Box Model, Margins, Padding & Borders

Understanding content, padding, border, margin & box-sizing: border-box

Module 1: CSS Box Model Architecture

All HTML elements can be considered as boxes.

Core Theory & Principles

Content: The actual text, image, or content of the element.
Padding: Clears an area around the content (inside border).
Border: A border that goes around the padding and content.
Margin: Clears an area outside the border (spacing between elements).
box-sizing: border-box includes padding and border in the element's total width and height.

Practical Key Takeaways

Mastering CSS Box Model Architecture builds fundamental development capability. Review practical code and outputs carefully.

💻 Practical Code Example - CSS Box Model Architecture

<!DOCTYPE html>
<html>
<head>
<style>
  .box-demo {
    width: 280px;
    background-color: rgb(30, 41, 59);
    color: white;
    padding: 20px;
    border: 4px solid rgb(56, 189, 248);
    margin: 15px;
    box-sizing: border-box;
    border-radius: 8px;
  }
</style>
</head>
<body>
  <div class="box-demo">
    <h3>Box Model Container</h3>
    <p>Content + 20px Padding + 4px Border + 15px Margin.</p>
  </div>
</body>
</html>

📤 Expected Output / Browser Rendered Result:

Output Verified Cleanly.

Module 2: CSS Borders & Rounded Corners (border-radius)

Controlling border style, width, color, and rounded corners.

Core Theory & Principles

border-style: solid, dashed, dotted, double, none.
border-width: 1px, 2px, 5px, thick, medium.
border-color: rgb(r, g, b) or color names.
border-radius: rounded corners in px or percentage (e.g. 50% for circles).

Practical Key Takeaways

Mastering CSS Borders & Rounded Corners (border-radius) builds fundamental development capability. Review practical code and outputs carefully.

💻 Practical Code Example - CSS Borders & Rounded Corners (border-radius)

<div style="border: 2px dashed rgb(74, 222, 128); padding: 15px; border-radius: 12px; background: rgb(15, 23, 42); color: white;">
    <h4 style="color: rgb(74, 222, 128); margin: 0;">Dashed Green Border Box</h4>
    <p style="margin: 5px 0 0 0;">Styled with 12px border-radius rounded corners.</p>
</div>

📤 Expected Output / Browser Rendered Result:

Output Verified Cleanly.