How do I add or reduce spacing between blocks and elements?

Hover over the desired element, container, or block on the page or in the Layout tab to see where additional margin and padding has been added to your design. The green areas displayed on page indicated padding, and the yellow areas on page indicate margin. 

A quick reminder on the difference between Margin & Padding:

• Margin: Creates space between Elements/Blocks.

• Padding: Creates space inside of an Element or Block

Click right onto the element, block, or container showing additional padding, and this will take you directly into the styling options. 

Open the Margin, Padding dropdown menu and edit the desired amount of padding to the top, bottom, left, and right sides of the element, container, or block.

This can be done by either:

  • Clicking on the number values and typing directly into the input fields so you can control each side individually
  • Clicking the '-' and '+' buttons, which will add equal amounts of Padding to all four sides at the same time

Take a look at the video below of a designer updating their headline element.

Note: You can also change the desired unit of spacing (REM, PX, EM, %, VW, VH, and auto). We recommend using REMs or percentages as it scales better for mobile and tablet views.

Take a look at the video below to see this in action:

 

Adding Margin & Padding (Quick) from Splash on Vimeo.

 

Splash Tip: We also highly recommend using padding to decrease or increase the height of a block, element, or container. If you elect to use the Width & Height tab, and enter a hard height instead, it will disregard elements inside a block or container and does not scale for mobile devices. Watch the designer add padding to the Cover Block below:

Adding Padding To A Block from Splash on Vimeo.

Was this article helpful?
0 out of 0 found this helpful