How to use margin and padding to create beautiful space on your web page

When designing a good-looking web page, the amount of space between the elements on your page (between the text, headings and images, for example) is one of the most important factors to consider.

And that space is super-easy to create and to adjust in the WordPress editor by using the margin and padding controls.

Here’s an introduction to what margin and padding are, and how to use them in the WordPress block editor.

Margin and padding do very similar things (they both create space on a web page); but there are some fundamental differences to understand to use them to full effect:

• Margin is the space around the outside of an element.
• Padding is the space between an element’s border and the element’s content (in other words, padding is space inside the element).

Take two framed pictures side by side on a wall:

Now imagine those two pictures as image files side-by-side in separate image blocks on a web page.

Here’s how the web page would read the code of the image blocks in order to display them correctly:

• Margin is outside the picture frame (or the border, as it is known in CSS and in WordPress).
• Padding is inside the picture frame — i.e, between the border and the content of the image

The margin, border, padding and content are all adjustable, allowing you to display an image, or any element on a web page, exactly how and where you want to.

Essentially, each piece of content on a web page sits in its own box, or ‘block’ as it is called in WordPress. Each block is arranged on top of, below, and next to other blocks, and each block is made up of content (that you add — words or an image, for example) and the padding, border and margin (that WordPress creates around your content) that you can edit and adjust as you like.

In general:

• use margins to adjust the spacing of an element relative to another element
  • For example, to move the left-hand image shown above further away from the right-hand image increase its right-hand margin
  • Note: Margin moves an element up and down, or left and right, on a page
  • Use negative margin to overlap an element with another element
• use padding to adjust the look of an element
  • For example, to increase the amount of white space between black border of the left-hand image and its content (i.e the picture of the plant) increase the top, right, bottom and left padding of the image.

WordPress makes it very easy to adjust margin and padding.

Every block you use in the WordPress block editor has margin and padding controls.

Simply select the block you want to edit and, in its editing controls, adjust the margin and padding to get the look you want.

Below is the standard WordPress heading block inserted in a page.

Scroll down its editing controls, open Dimensions and the margin and padding controls display.

Both margin and padding have separate controls for top, right, bottom and left spacing.

To use them individually, click the Unlink sides button

You may occasionally want to edit margin and padding with more control than that provided by the WordPress block editor.

Here are some basic CSS shortcuts that can be used for both margin and padding to help you code the values manually.

Every element on a web page has four margin settings and four padding settings you can adjust: top, right, bottom, left.

To set the same value on all four sides of an element, simply use the margin or padding property:

• { margin: 10px; }
• { padding: 10px; }

To set a values for specific sides of an element, use the -top, -right, -bottom, and -left properties. For example, for margin at the bottom of an element:

• { margin-bottom: 10px; }

You can also specify values in shorthand for multiple sides, depending on which values you want on which side.

Three values

If the margin property has three values:

• { margin: 25px 50px 75px; }
  • top margin is 25px
  • right and left margins are 50px
  • bottom margin is 75px

Note: swap ‘margin’ for ‘padding’ to do the same with padding.

Two values

If the margin property has two values:

• { margin: 25px 50px; }
  • top and bottom margins are 25px
  • right and left margins are 50px

Note: swap ‘margin’ for ‘padding’ to do the same with padding.