Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Margin and Padding

Use margin and padding to space blocks from each other and change the space between a block's content and border.

An example of margins is the space between tiles on a page. If you don't want the tiles all touching each other, you'd add margins to put some space between them.

An example of padding is making a button wider and taller so that it is easier touch with a fingertip or broad pointer.

Think of padding like the stuffing you put in a pillow to make it bigger. Think of margins as the space between the pillows.

Margins

A margin is the space around the outside of a box. The following image features three boxes in a row on a webpage. The space between the boxes is margin.

Adjusting margins

To adjust margins, take the following steps:

  1. Select the block that needs margin adjustments.
  2. Go to the Margin & Padding section of the Style tab.
  3. Adjust the values in the outer rectangle to set the margin.

You can use any legal CSS unit for the value, such as percentage, ems, rems, or pixels (px).

The following video demonstrates adjusting the margin settings on a Text block. As the margin values change, the Text block moves further from or closer to the blocks above and below as well as either side.

Padding

Padding is the space inside of a box, specifically the space between the content, such as copy, and the border of the box.

The following image features three boxes in a row on a webpage. The space within each box, between the content and the border is padding.

To adjust padding, take the following steps:

  1. Select the block that needs padding adjustments.
  2. Go to the Margin & Padding section of the Style tab.
  3. Adjust the values in the inner rectangle to set the padding.

You can use any legal CSS unit for the value, such as percentage, ems, rems, or pixels (px).

The following video demonstrates adjusting the padding settings on a Text block. As the padding values change, the Text block grows or shrinks while its margins–the distance from the top and bottom boxes, as well as either side–remains unchanged.

Margin and padding are best for adding space around and inside of a block. Though sometimes adjusting these settings can make it appear as though the block position is changing, the margin and padding still take up space and affect the flow as the page attempts to adjust to different screen sizes.

Instead, use Alignment settings in the Style tab to significantly adjust the location of an item within its containing block. Reserve margin and padding for basic styling rather than overall layout. By sticking to these guidelines, and leveraging Builder's built-in responsive styles, you'll be able to concentrate more on connecting with your users.

Changing styles by device type

When you are building a layout in the Visual Editor, check for responsiveness periodically by using the Laptop, Tablet, and Phone icons at the top of the Visual Editor working area.

Often, large font sizes and padding make sense on a wider screen, but on a hand-held device you sometimes need to change the styles on smaller screens so that the layout still works. In this situation, you can edit the styles while in the Tablet or Phone view. The changes you make in smaller screen views only apply to those screen widths.

Builder has three built-in breakpoints, or screen widths for planning your layouts:

  • Phone: 0-639px
  • Tablet: 640px-991px
  • Desktop: 992px+

In the following video, the font size and padding on the Text block are too large for smaller screen sizes. The video begins by showing the Laptop view and then switching to the Tablet and Phone views where you can change the styles.

When you change styles on a screen size, the change applies that screen width and smaller, but do not affect the larger screen sizes. In this way, you can fine-tune the styles for smaller devices without changing styles for wider screens.

Next steps

Understanding margin and padding are integral to great layout. For more information on using Builder to create responsive layouts, read Using Columns for Responsiveness, which covers how Builder's built-in Columns block adapts to different screen sizes automatically.


Was this article helpful?