This tutorial will explain what margins and padding are, how they are different, and what they can be used for in Shogun's visual 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.