CSS Fundamentals

The Box Model

⏱ 7 min read📖 Beginner

Every HTML element is a rectangular box. The CSS box model describes the four layers of that box: content, padding, border, and margin. Understanding this is fundamental to controlling layout and spacing.

Our Netflix page has the right colors, fonts, and classes. But the spacing is all wrong — everything is squished together. That's what the box model fixes.

The Four Layers

Every element on the page is a box with four layers around it:

Content — the actual text or image inside the element
Padding — space between the content and the border (inside the box)
Border — a visible or invisible line around the padding
Margin — space between this element and other elements (outside the box)

.hero {
  padding: 60px;      /* space inside */
  border: 2px solid white;  /* visible edge */
  margin: 20px;       /* space outside */
}

The Browser Default Problem

By default, browsers add margin and padding to elements like <body>, <h1>, and <p>. This creates gaps you didn't ask for.

The fix is a CSS reset — applied to everything at the very top of your CSS file:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

The * selector targets every single element on the page. Setting margin and padding to zero removes all default spacing. box-sizing: border-box makes width and height include padding and border — which makes sizing much more predictable.

💡

Always start your CSS file with this reset. Every professional project does it.

padding

Padding is the breathing room inside an element. Without it, content touches the edges of the box.

/* Same on all four sides */
.hero {
  padding: 60px;
}

/* Different on each side: top right bottom left */
.hero {
  padding: 80px 40px 60px 40px;
}

/* Or target sides individually */
.hero {
  padding-top: 80px;
  padding-bottom: 60px;
  padding-left: 40px;
  padding-right: 40px;
}

💡

Click Try It Yourself and adjust the padding on the hero section. Watch how the content moves away from the edges.

margin

Margin creates space between elements. It pushes things apart from the outside.

h1 {
  margin-bottom: 16px;   /* push the next element down */
}

.hero {
  margin-top: 60px;      /* push the hero down from the top */
}

One useful trick: margin: 0 auto centers a block element horizontally inside its parent (as long as it has a fixed width):

.content {
  width: 600px;
  margin: 0 auto;    /* 0 top/bottom, auto left/right = centered */
}

border

Borders draw a visible line around an element. The syntax is: size style color.

.card {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card {
  border-bottom: 2px solid #e50914;
}

input {
  border: 1px solid #ccc;
  border-radius: 4px;
}

border-radius rounds the corners of an element. Netflix uses this on buttons and input fields.

width and height

You can set explicit sizes on any block element:

.hero {
  min-height: 100vh;    /* at least the full viewport height */
  width: 100%;          /* full width of the parent */
}

.movie-card {
  width: 200px;
  height: 120px;
}

100vh means 100% of the viewport height — basically the full screen. Using min-height instead of height means the section can grow taller if there's more content.

Next up: the hero section is spaced out perfectly. Now let's build the Netflix top bar — logo on the left, button on the right — using Flexbox.

Learn about Flexbox layout →

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.