Want to shift elements on your landing page? You can do this using margin and padding!
What’s the difference between margin and padding?
Margin affects the position of an element in relation to other elements. It is the space outside the border of an element and creates distance between that element and surrounding elements. Margin ensures that an element isn’t directly touching another element.
Padding is the space inside the border of an element, between the border and the content of that element (such as text or images). It increases the distance between the content and the border, creating more breathing room within the element itself. Essentially, it adjusts the size of the element itself.
ℹ️ Elements include items such as text, images, buttons, etc.
Adjusting margin
Want to move your text or an image slightly to the side, up, or down? You can do this by adjusting the margins.
Let’s take an image as an example, but it works the same way for text, buttons, or any other element!
By clicking on the image, a margin option appears on the left-hand side. You can move the image up and down...
…but also left and right!
The larger the value, the more space is created on that side.
ℹ️ In addition to using the preset values, you can also enter a custom value.
Adjusting padding
With padding, you adjust the space inside the border of an element:
You can also adjust this left and right:
This makes it easy, for example, to centre a group of buttons on your page, just like in the example above!
Example
An extreme example, but if we use these settings:
This creates the following effect relative to the content block above:
A margin of 320 essentially adds “white space” outside the element where no content can be placed between two content blocks.
A padding of 320 adds “white space” inside an element, potentially creating space between two elements within the same content block.