Margin, Padding, and White Space

💡 The Concept

White Space

White space (also called white space) is the empty, unmarked, or blank area between and around the design elements in a layout: text, images, buttons, and everything else. It improves readability, creates balance, and highlights key content.

White space is not always white. While often referred to as “white space,” it can be any color or even a background image. What matters is that it gives elements room to breathe.

• Improved Readability: Better spacing between lines and paragraphs allows for faster scanning.
• Increased Focus: Draws attention to specific, important elements.
• Good Alignment: Creates a cleaner and more organized look.

Apple always does a great job with white space. See the screenshot below for an example of how powerful white space can be.

The padding Property

Padding goes inside the border, between the content and the border. The simplest approach applies the same padding to all four sides at once:

img {
   border: 5px solid purple;
   padding: 20px;
}

You can also target each side independently:

img {
   padding-top: 5px;
   padding-right: 10px;
   padding-bottom: 3px;
   padding-left: 30px;
}

Padding Shorthand

The shorthand sets all four sides in one property. The values go clockwise starting at the top: top, right, bottom, left.

/* top | right | bottom | left */
img {
   padding: 5px 10px 3px 30px;
}

/* Two values: top/bottom | left/right */
img {
   padding: 10px 20px;
}

You can set padding using pixels (px), ems (em), or percent (%). Percent is especially useful for mobile design because the spacing scales with the screen width.

The margin Property

Margin adds space outside the border, pushing other elements away. Unlike padding, margin is always transparent and never takes on the element’s background color.

p {
   margin: 20px;
}

You can set each side independently:

p {
   margin-top: 10px;
   margin-right: 20px;
   margin-bottom: 10px;
   margin-left: 20px;
}

Margin Shorthand

Like padding, margin uses the same clockwise shorthand: top, right, bottom, left.

/* top | right | bottom | left */
p {
   margin: 10px 20px 10px 20px;
}

/* Two values: top/bottom | left/right */
p {
   margin: 10px 20px;
}

/* All four sides the same */
p {
   margin: 10px;
}

Centering with margin: 0 auto

Setting left and right margins to auto is a classic way to center a block element horizontally. The browser splits the available space evenly on both sides:

img {
   display: block;
   margin: 0 auto;
}

The element needs a set width for this to work, and it must be a block element. Use display: block on elements like <img> that are inline by default.

Inspecting Margin and Padding in Chrome

As a web developer, you will spend a lot of time using Chrome Developer Tools to track down spacing issues. Right-click any element, choose Inspect, and hover over the HTML in the Elements panel. Chrome highlights padding in green and margin in salmon (a light peach color) directly on the page.

🎬 Video Demonstration

This video demonstrates how to set padding and margin on elements.

Exercise: Try It Yourself

Step 1. Open JSFiddle and paste this into the HTML panel:

<h1>Spacing Demo</h1>
<img src="https://webdevstudents.com/wp-content/uploads/2025/09/axylotl.png" alt="pink axolotl in a tank" width="100" height="100">

Step 2. Paste this into the CSS panel:

img {
  background-color: lightblue;
  border: 5px solid steelblue;
}

Step 3. Add padding: 20px to img. Watch the space grow inside the border.

Step 4. Add margin: 30px to img. Watch the space push other elements away. Your JSFiddle now looks like the screenshot below. Note the lightblue background color shows the padding.

Step 5. Now try centering the image. Add display: block to img and change the margin to 0 auto. Images are inline by default, so display: block is needed for centering to work.

❓ Frequently Asked Questions

★ Key Takeaways

Padding and margin are the two main tools for adding space in CSS. Padding goes inside the border; margin goes outside it. Together they create the white space that makes layouts easier to read and more visually balanced. In the next lesson you will see how these properties fit into the CSS Box Model.

← Back to Page Layout Lessons

← Back to All Lessons