Spacing and Layout Basics

The box model is the single most important concept in CSS layout. Every HTML element — every heading, paragraph, image, and button — is a rectangular box. Understanding how these boxes work is the key to controlling your page layout.

Every box has four layers, working from the inside out:

|          margin (space outside the border)           |
|   |      border (the edge of the element)        |   |
|   |   |   padding (space inside the border)  |   |   |
|   |   |   |        content              |   |   |   |
|   |   |   |  (the text, image, etc.)    |   |   |   |
|   |   |   |____________________________|   |   |   |
|   |   |_____________________________________|   |   |
|   |______________________________________________|   |
|________________________________________________________|

• Content — the actual text, image, or child elements inside the box. This is what you put between the opening and closing HTML tags.
• Padding — space inside the border, between the content and the border edge. Padding has the same background color as the content area.
• Border — the edge of the element. It wraps around the padding and content. Borders can be visible (colored lines) or invisible.
• Margin — space outside the border, separating this element from its neighbors. Margins are always transparent — you see the background of the parent element through them.

Think of it like a picture in a frame: the picture is the content, the mat board around the picture is the padding, the frame itself is the border, and the space between this frame and other frames on the wall is the margin.

Padding and margin are the two properties you'll use most often to create space:

div {
  padding: 20px;    /* space inside the box */
  margin: 10px;     /* space outside the box */
}

You can also control each side individually:

div {
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 15px;

  margin-top: 10px;
  margin-right: 0;
  margin-bottom: 30px;
  margin-left: 0;
}

Shorthand saves you from writing four lines. There are several shorthand patterns:

/* One value: all four sides the same */
padding: 20px;

/* Two values: top/bottom, left/right */
margin: 10px 20px;

/* Three values: top, left/right, bottom */
padding: 10px 20px 30px;

/* Four values: top, right, bottom, left (clockwise!) */
margin: 10px 15px 20px 25px;

Pro tip: the two-value shorthand — margin: 10px 20px; — is incredibly common. It sets the top and bottom to 10px and the left and right to 20px. You'll see it used all over real stylesheets.

Values are usually in pixels (px), but you can also use em (relative to font size), rem (relative to the root font size), or percentages. For now, pixels are fine.

Borders give elements a visible edge. The border property takes three values: width, style, and color:

div {
  border: 2px solid #cccccc;
}

img {
  border: 1px dashed #999999;
}

Border styles — the most common are solid (a continuous line), dashed (dashes), dotted (dots), and none (no border — the default).

Rounded corners are one of the most popular CSS features. The border-radius property rounds the corners of any box:

button {
  border: 2px solid #4F7EF7;
  border-radius: 8px;
  padding: 10px 20px;
}

.avatar {
  border-radius: 50%;   /* perfect circle! */
}

A border-radius of 50% on a square element creates a perfect circle — great for profile pictures and icon backgrounds. Small values like 4px to 12px give buttons and cards a soft, modern look.

You can control how wide and tall an element is:

div {
  width: 600px;
}

But a fixed width can cause problems — on a phone screen that's 375px wide, a 600px-wide element would overflow and force the user to scroll sideways. That's where max-width shines:

div {
  max-width: 600px;   /* never wider than 600px, but can shrink */
  width: 100%;         /* take up all available space, up to 600px */
}

This combination is extremely common: max-width sets an upper limit, and width: 100% makes sure the element fills the available space on smaller screens. The element will be 600px wide on a big monitor but shrink to fit on a phone — no horizontal scrolling needed.

• width — sets the exact width
• max-width — the maximum width (can be narrower on small screens)
• min-height — ensures an element is at least a certain height, even if the content is short

Best practice: use max-width instead of width for content containers. It makes your pages naturally responsive without any extra work.

Centering is one of the first things every CSS beginner wants to do. There are two kinds of centering, and they use different properties:

Centering text (inline content) — use text-align: center;:

h1 {
  text-align: center;
}

This works on headings, paragraphs, links, and any text inside an element. It's also how you center images that are inside a block.

Centering a block element (like a <div> or a card) — use margin: 0 auto;:

div {
  max-width: 600px;
  margin: 0 auto;   /* 0 top/bottom, auto left/right = center */
}

The auto value tells the browser to split the remaining horizontal space evenly between left and right margins. The result: the element sits in the center of its parent. This only works when the element has a defined width or max-width — the browser needs to know how wide the element is before it can calculate the margins.

Quick reference:

• text-align: center; — centers text and inline content (headings, paragraphs, images)
• margin: 0 auto; — centers a block element (div, section, card) horizontally

Take your Module 1 page and apply spacing and layout:

• Add padding: 20px; to your <main> section
• Give your content a max-width (try 700px) and center it with margin: 0 auto;
• Add a visible border and border-radius to your profile image
• Add margin-bottom to your headings to create breathing room

Notice how much more polished the page feels just by adding space and centering!