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.
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
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.
Splash Tip: We also require to use padding to decrease or increase the height of a block, element, or container. If you use Height, it will disregard elements inside a block or container and does not scale for mobile devices.