Chapter 15 | Spacing Foundation

CSS Box Model

Every HTML element is treated like a box in CSS. Understanding content, padding, border and margin is essential for creating clean cards, sections, buttons and layouts.

Start Learning Try Box Model

Content

The actual text, image or element content.

Padding

Space between content and border.

Border

Line around padding and content.

Margin

Space outside the border.

Learning Objectives

After This Chapter, You Will Understand

This chapter gives you strong control over spacing and element sizing.

Content

Understand the actual area where content appears.

Padding

Control inner spacing inside elements.

Border

Add visible boundary around elements.

Margin

Control outer spacing between elements.

Box Model

What is CSS Box Model?

The box model explains how every HTML element occupies space on a webpage.

1 Simple Meaning

In CSS, every element is a rectangular box. This box has content, padding, border and margin. These four layers decide how much space the element takes and how far it stays from other elements.

Formula: Total width = content width + left/right padding + left/right border + left/right margin

Professional Tip: Most layout problems are spacing problems. Box model helps you solve them.

Margin

Border

Padding

Content

.box {
    width: 300px;
    padding: 20px;
    border: 3px solid #0d6efd;
    margin: 30px;
}

Box Parts

Content, Padding, Border and Margin

Each layer has a specific purpose in element design.

Part	Meaning	CSS Property	Example
Content	Actual text, image or inner content	width, height	width: 300px;
Padding	Space inside the element, around content	padding	padding: 20px;
Border	Line around padding and content	border	border: 2px solid blue;
Margin	Space outside the element	margin	margin: 30px;

Easy Memory: Padding is inside the border. Margin is outside the border.

Spacing Control

Padding and Margin Examples

Padding improves inner comfort. Margin creates distance between elements.

No Padding

Content feels tight and uncomfortable.

Text

padding: 0;

Good Padding

Content gets breathing space.

Text

padding: 22px;

Margin Gap

Margin creates distance from outside.

Text

margin: 20px;

2 Individual Sides

You can control each side separately.

margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;

3 Shorthand

Shorthand saves time and keeps CSS shorter.

/* top right bottom left */
margin: 10px 20px 30px 40px;

/* top-bottom left-right */
padding: 20px 30px;

Box Sizing

content-box vs border-box

box-sizing controls how width and height are calculated.

4 Default: content-box

In the default model, width applies only to content. Padding and border are added extra, so the element becomes bigger than the given width.

.box {
  width: 300px;
  padding: 20px;
  box-sizing: content-box;
}

5 Recommended: border-box

In border-box, width includes content, padding and border. This makes layout calculation easier.

* {
box-sizing: border-box;
}

Best Practice: Many professional websites use box-sizing: border-box; globally.

Try It Yourself

Practice CSS Box Model

Edit padding, margin, border and box-sizing to see the result.

HTML + CSS Code Edit and run

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Box Model Practice</title>
    <style>
        *{
            box-sizing:border-box;
        }

body{
            font-family:Arial;
            background:#f5f9ff;
            padding:20px;
        }

.card{
            width:320px;
            background:white;
            padding:24px;
            border:4px solid #0d6efd;
            margin:30px auto;
            border-radius:18px;
            box-shadow:0 8px 20px rgba(0,0,0,.08);
        }

h1{
            color:#06285f;
            margin-top:0;
        }

p{
            color:#334155;
            line-height:1.7;
            margin-bottom:20px;
        }

.btn{
            display:inline-block;
            background:#06285f;
            color:white;
            padding:12px 18px;
            border-radius:25px;
            text-decoration:none;
            font-weight:bold;
        }
    </style>
</head>
<body>

<div class="card">
        <h1>Box Model</h1>
        <p>This card uses width, padding, border, margin and border-radius.</p>
        <a href="#" class="btn">Practice More</a>
    </div>

</body>
</html>

Output Preview Browser result

Practice Task: Change padding to 40px, border to 8px dashed orange, margin to 50px auto and observe the difference.

Common Mistakes

Mistakes Students Should Avoid

Most beginner layout issues happen because margin and padding are confused.

Wrong Habits

Using margin when padding is needed
Using padding when spacing between elements is needed
Forgetting that border adds extra size in content-box
Adding too much random spacing
Not using box-sizing: border-box in layouts

Correct Habits

Use padding for inner spacing
Use margin for outer spacing
Use border-box for easier width control
Keep spacing consistent
Test card and section spacing on mobile too

Remember: Padding gives comfort inside the box. Margin gives distance outside the box.

Quick Revision

Remember These Points

Revise these before moving to Chapter 16.

Box Model

Every HTML element is treated as a rectangular box in CSS.

Content

The actual area where text, images or inner content appear.

Padding

Space between content and border.

Border

Line around padding and content.

Margin

Space outside the border.

border-box

Makes width include content, padding and border.

Protected Learning Content

CSS Box Model

Content

Padding

Border

Margin

After This Chapter, You Will Understand

Content

Padding

Border

Margin

What is CSS Box Model?

1 Simple Meaning

Content, Padding, Border and Margin

Padding and Margin Examples

No Padding

Good Padding

Margin Gap

2 Individual Sides

3 Shorthand

content-box vs border-box

4 Default: content-box

5 Recommended: border-box

Practice CSS Box Model

Mistakes Students Should Avoid

Wrong Habits

Correct Habits

Test Your Understanding

1. Which part contains the actual text or image?

2. Padding is space:

3. Margin is space:

4. Which property controls whether width includes padding and border?

5. Which value is recommended for easier layout sizing?

Remember These Points

Box Model

Content

Padding

Border

Margin

border-box