This tutorial will explain what margins and padding are, how they are different, and what they can be used for in Shogun's page editor.

How to Use Margins on a Page

Margins are the spacing surrounding an element. Margins are not actually a part of the element, but they push other elements further away.

How to Use Padding on a Page

Padding is the spacing within an element. Padding will push the content inside the element further in, and create more space in the element.

My element doesn't look right on mobile!

Totally normal. We generally recommend that if you need to go over 25px of padding, that you consider making use of the Column Element to position your content. Any larger margins or padding can cause risks of your content not being responsive on mobile.

As you can see from the example above, the top button has a margin of 340px applied to it, meaning that it is not responsive. The second button is placed inside a Column Element to ensure that it is responsive.

How to edit margins individually

As you may have noticed, by default, Shogun links the top and bottom values, as well as the left and right values. This can be changed to give you more control over the margins and paddings of your elements. Simply "unlock" the values.

The different dimensions to choose from

Shogun offers you four options for the dimensions of your margins and padding. We offer px (pixels), em, % (of the container) and auto.

The 'auto' option is great to use with a max-width as this will let the browser automatically calculate the margins or paddings that are to be applied.

Did this answer your question?