CSS Margin

h1 {
  margin-bottom: 24px;
}

.card {
  margin: 0 auto;
}

Let me ask you something.

Have you ever noticed that on a well designed page everything has room to breathe? The heading is not sitting right on top of the paragraph. The button has space above it. The sections are separated cleanly from each other.

That space between elements is margin. And it is one of the most used properties in all of CSS.

We just learned about padding which is the space inside an element. Margin is the space outside an element between it and everything around it.

Padding vs Margin

Before we go further let me make sure this distinction is crystal clear because it confuses almost everyone at the beginning.

Padding is space inside the element. Between the content and the element's own edges. It pushes inward.

Margin is space outside the element. Between the element and everything around it. It pushes outward.

Think of it like a person standing in a room. Padding is the space inside their personal bubble. Margin is the distance they keep from other people around them.

What is Margin

In CSS you add margin using the margin property. It works exactly the same way as padding — one value for all sides, two values for top-bottom and left-right, or four values for each side individually.

The heading now has 40px of space pushing everything away from it on all four sides.

Margin on Specific Sides

Just like padding you can control each side separately.

The heading sits close to the paragraph below it. The paragraph has more space before the button. The button has extra space above it. Everything is controlled precisely.

Two Values and Four Values

Just like padding, margin supports shorthand with two or four values.

40px on the top and bottom, 0 on the left and right. This is a very common pattern for headings and sections — you want vertical space but no extra horizontal space.

Margin Auto — Centering Elements

Here is one of the most useful tricks in CSS. If you want to center a block element horizontally on the page you can use margin: auto.

The card is now centered on the page. The browser automatically splits the available space equally on the left and right sides.

This only works when the element has a defined width. Without a width the element takes up the full available space and there is nothing to center.

Removing Default Margins

Here is something that trips up almost every beginner. Browsers automatically add their own default margins to certain elements. Headings, paragraphs, the body itself — they all come with built in margin that you did not ask for.

This is why when you open a fresh HTML page there is already a gap around the content even though you did not add any CSS yet.

To remove all those defaults in one go you use this:

Now everything starts from zero and you are in full control of every space on the page. This is called a CSS reset and it is something most developers add to the very top of their CSS file before writing anything else.

Building the Netflix Clone

Let us use margin to properly space out all the elements in our Netflix clone.

Everything is reset to zero first. Then we add back exactly the spacing we want. The logo sits at the top with space below it. The main heading has a generous top margin pushing it down toward the center of the page. The paragraphs have breathing room between them. The button sits comfortably below the form with space above it.