Margins and padding

This tutorial will explain what margins and padding are, how they are different, and what they can be used for.

Margins and padding are incredibly useful for making pixel perfect styling. Both are CSS (Cascading Style Sheet) attributes that are attached to a component on the page.

Both margins and padding have the following attributes: top, right, bottom, left. Those control the spacing on that side of the component.

Margins

Margins are the spacing surrounding a component. Margins are not actually a part of the component, but they push other components further away.

Padding

Padding is the spacing within a component. Padding will push the content inside the component further in.

Next...

To illustrate the difference, we will start by creating two Text components on the page. Type any text you want into each.

With the first Text component we will show margins. Click on the top component to select it. In the right hand side toolbar, you can see the component is selected. Under the 'Styles' menu, click 'Background', and select a color that you like. Then click on the 'Margins' text.

On the top left there is a lock icon, this links the values of top and bottom and left and right. Many times, people want to link these values so that there is symmetry on the page. If you don't need it, just toggle it off.

Begin increasing the the values of the margins and you can see that the space surrounding the text component increases. You will notice that the background color does not cover the margin.

With the second Text component we will show padding. Click on the bottom component to select it. In the right hand side toolbar, you can see the component is selected. Under the 'Styles' menu, click 'Background', and select a color that you like. Then click on the 'Padding' text.

Begin increasing the the values of the padding and you can see that the space inside the text component increases. The component increases in size, and the text is pushed further from the border of the component.

So you can see that if you want to increase the space between components, you should use the margin attribute. But if you want to move components inside another component, you should use padding. It seems confusing, but if you play around with it a little bit, you will quickly get the hang of it.

Latest Tutorials

Buttons

Learn how to position and style buttons in Shogun's drag and drop page builder.

Read Tutorial

Full Width Box Element

Use the Box element in Shogun to create a full width layout on your page.

Read Tutorial

How to create a page

Simple tutorial on how to create a basic page in Shogun, save it, and see the preview of what it will look like live.

Read Tutorial