Snippets and spacing - Margins and Padding
Using the Style Editor popup, you can change the spacing of, rows, columns and text as needed.
What is Margin and Padding
Margin in the spacing OUTSIDE of an element, Padding is INSIDE the element.
In our example above of a black outlined content box. It has margins set on the bottom (Orange) and Padding inside left and right (blue) preventing the text from touching the edges.
Viewing the current margin and padding sizes via the Style Editor
Click the snippet you want to edit and click the RED COG icon to launch the Style Editor
You can hover your mouse over any of the elements in the top nav to visually view margin (orange) and padding (blue) values for the first element of that type.
Click the required element in the top nav to get the properties for the element. This includes margin and padding values.
To change values, click either the padding values or margin values to quickly jump to the padding editor or click the [] spacing tab in the tabbed menu.
Changing the current margin and padding sizes via the Style Editor
To set a value via dropdown, click the SPACING TAB [ ] in the top tabbed area, then choose the margin or padding section.
Clicking the Spacing +/- section will give you the option to incremenatally increase or decrease the padding, visually changing the element as you update. You can also click into the value e.g. 16px to set a specific number.
Adjusting margin and padding on mobile, viewing changes on mobile
Setting spacing on desktop will also effect mobile by default, but you change choose from some common options to change how spacing looks on mobile, via the MOBILE tab in the Style Editor.
To view how it will look on mobile preview the site in a new tab and use the Right click > INSPECT ELEMENT option, then CTRL + SHIFT + M. Alternatively you can change the Editor Size dropdown to Mobile to view changes in the CMS.
Using the mobile preview in a new tab is a good option if you are looking to make tweaks all over the site, you can leave it open in a separate tab while editing and do not have to change editor size to see how it looks, simply refresh the preview tab.
To apply mobile settings use the MOBILE tab then the Margin | Padding section
Example of using the mobile view option in the browser window (website preview)