INTRO

INTRO

New

Intro to the Designer

Intro to the Designer

New

2:48

Intro to HTML & CSS

Intro to HTML & CSS

New

3:38

WEB STRUCTURE

WEB STRUCTURE

New

The Box Model

The Box Model

New

1:54

Element Hierarchy

Element Hierarchy

New

3:57

Navigator

Navigator

New

2:45

Element Basics

Element Basics

New

Element Panel

Element Panel

New

1:49

Section

Section

New

4:14

Container

Container

New

2:44

Columns

Columns

New

2:22

Div Block

Div Block

New

3:37

Components

Components

New

Intro to Forms

Intro to Forms

New

4:55

Navbar

Navbar

New

9:38

Slider

Slider

New

4:56

Symbols

Symbols

New

3:47

Styling Basics

Styling Basics

New

Intro to Style Panel

Intro to Style Panel

New

3:15

HTML Tags

HTML Tags

New

3:59

Classes

Classes

New

2:46

Combo Classes

Combo Classes

New

4:05

States

States

New

2:47

Layout

Layout

New

Intro to Web Layout

Intro to Web Layout

New

2:27

Padding & Margin

Padding & Margin

New

2:48

Display Settings

Display Settings

New

2:54

Intro to Flexbox

Intro to Flexbox

New

2:27

Grid layouts overview

Grid layouts overview

New

4:18

Positioning Overview

Positioning Overview

New

1:48

Responsive Design

Responsive Design

New

Intro to Responsive Design

Intro to Responsive Design

New

2:21

Intro to Breakpoints

Intro to Breakpoints

New

INTERACTIONS CORE CONCEPTS

INTERACTIONS CORE CONCEPTS

New

Triggers & animations

Triggers & animations

New

4:31

CMS & Dynamic Content

CMS & Dynamic Content

New

Intro to Dynamic Content

Intro to Dynamic Content

New

1:36

Intro to Webflow CMS

Intro to Webflow CMS

New

2:02

CMS Collections

CMS Collections

New

2:05

Collection List

Collection List

New

3:33

Filtering Collection Lists

Filtering Collection Lists

New

2:47

Collection Page

Collection Page

New

3:01

Using the Editor

Using the Editor

New

2:22

CMS Collection Fields

CMS Collection Fields

New

Plain Text Field

Plain Text Field

New

0:51

Rich Text Field

Rich Text Field

New

1:16

Image Field

Image Field

New

1:24

Switch Field

Switch Field

New

0:58

Reference Field

Reference Field

New

1:11

Multi-reference Field

Multi-reference Field

New

2:31

new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

Padding and margin enable you to add space inside or outside of an element's boundary. Padding creates space on the inside, while margin creates space on the outside. These properties make it possible to create responsive websites with content that reflows — all while maintaining consistent spacing. 

In this article, we'll cover: 

  1. Adding margin to one side, opposite sides, or all sides at once
  2. Adding padding to one side, opposite sides, or all sides at once
  3. Negative margin
  4. Auto margin
  5. Centering elements horizontally

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

Padding and margin can add space or breathing room inside or outside of an element's boundary. Padding creates space on the inside, while margin creates space on the outside.

Let's explore four different aspects of padding and margin: Individual Sides, Complementary Sides, All Sides, and then Negative Margin.

Let's start with Individual Sides. Here's a heading and an image — some paragraphs — not unlike many layouts. But if we select our heading and add some margin, we can eyeball this and click and drag to adjust. And once we get it just right, we can go down and apply that same class to another heading. And what we're getting at with this example is that we don't want to have to set margin (or any other style value) on individual elements. We're using classes to do the work for us. When we change the margin again on this one, it affects our original heading because it has the same class applied.

Let's select this image. And we can adjust the margin here to create more breathing room.

That's Individual Sides.

“Complementary Sides" simply refers to making padding and margin decisions on both sides (top and bottom; left and right...). If we grab this div block and style our class, we can hold option (or alt) and drag to add padding (breathing room on the inside). And it does this on both sides. Same thing on the top and bottom. We can hold option (or alt) and grab the top or bottom and drag to adjust both sides at once.

That's Complementary Sides.

All Sides is an extension of the same concept. If we want to adjust all four sides at once, hold down shift, and grab the padding (or margin) of one side, and the other three will follow suit.

Finally, let's touch on Negative Margin. Here's a simple section with an image. The image has a soft drop shadow, but that's not terribly important to this.

As we already know, we can add bottom margin on the image to push our paragraphs down. But we can also add negative top margin. And as we do this, as we click and drag to adjust, we can see the image overlap the previous section. Negative Margin does exactly what it's intended to and no, it's not a hack. In fact, Negative Margin is widely accepted as valid CSS.

So, we can adjust padding or margin on Individual Sides, Complementary Sides, or All Sides at once. We can even set Negative Margin to achieve many different effects, like overlapping content.

As a quick epilogue, we’ll make a note that although we clicked and dragged to adjust pixel values, we can also type in values for padding and margin at any time. We can just type in the unit, right after the number. And in some cases, we don’t even need to use numbers. Want to horizontally center an element using auto margin on both sides? Here’s the third most satisfying button to press in all of Webflow.

So, padding & margin: a great way to add or remove breathing room, inside or outside of an element’s boundary.