All Collections
Getting Started
Quick start to margins and padding
Quick start to margins and padding

Margins create space between elements, and Padding creates space within an element, inside of Shogun.

Updated over a week ago

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.

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 "unlink" the values by clicking the chain icon in the upper-right corner of the margins panel.

Changing the unit of measure

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

The auto  option is great to combine with the Maximum Width option. When an element has a max-width applied to it, setting its side margins to auto  will center the element. 

Did this answer your question?