CMS Styling - Padding and Margins
Many sections in your platform will have padding and/or margins styling applied to them by default.
To try explain it as simply as possible:
Padding refers to the additional empty space that exists between the text/image/icon etc. and the edges of the "box" within which this text/image/icon exists.
Margins refer to the additional empty space that exists outside of this "box".
This guide explains how you can edit the padding and margins, which will allow to adjust the layout of everything on your platform.
Note that some elements/sections on your platform will already have padding/margins styling applied, so in this case you should edit the existing styling rather than adding new styling.
For more info about any CMS styling, you can search the Tailwind CSS guides that are available at https://tailwindcss.com/docs .
When we add padding, it adds empty space internally at the edges of the "box" within which the text/image/icon exists.
We use the styling format p-# (e.g. p-2 or p-4 to add equal padding in all directions).
The GIF below shows how this looks when we have 3 Staylive icons next to each other, initially with zero margins and zero padding, then with p-4 (and zero margins) and then with p-2 (and zero margins) . We've applied an orange background to each icon's "box", to show how this padding is occurring within this "box".
When we add margins, it adds empty space externally around the edges of the "box" of each text/image/icon.
We use the styling format m-# (e.g. m-2 or m-4 to add equal margins in all directions).
The GIF below shows how this looks when we have 3 Staylive icons next to each other, initially with zero margins and zero padding, then with m-4 (and zero padding) and then with m-2 (and zero padding). The orange background that we applied to each icon's "box" is still applied here, but because margins add empty space externally, the icons cover their entire box and we do not see any of the background colour.
It is often useful to use both padding and margins together. The GIF below shows how this looks when we add both p-2 and m-4, so that we have a little bit of internally space within each icon's box, and slightly larger external space between each of the three boxes.
In some situations you may want to apply padding and margins only in certain directions, or have overlapping effects of sections/texts/images/icons. The guides below show how these advanced styling methods can be implemented.
As mentioned above, the styling format p-# applies equal padding in all directions, but sometimes you might only want to add padding on certain sides of the text/image/icon.
To do this, we use can use the styling format px-# to only apply padding horizontally (on both the left and right), or py-# to only apply padding vertically (on both the top and bottom).
Even more specifically, we can use the styling formats pt-#, pb-#, pl-# and pr-# to apply padding only on the top, bottom, left and right respectively.
These same styling formats can be used to apply margins only on certain sides of the text/image/icon, but using mx-#, my-#, mt-#, mb-#, ml-# and mr-#.
Sometimes you might want sections/texts/images/icons to overlap each other, to achieve a more flowing effect when scrolling down a page.
We can use the styling format -mt-# on the section/text/image/icon that is positioned lower on the page, which will implement a negatively valued top margin. This has the effect of pulling this section/text/image/icon upwards, but without changing the position of the section/text/image/icon that is positioned above it.
It may also necessary be necessary to edit the z-index of this section. The z-index defines the order in which sections/texts/images/icons appear "on top" or "underneath" each other (similar to how "bring this item to the top" works in Microsoft Powerpoint/Word etc.) The z-index of 50 will appear above the z-index of 40, then 30, then 20, then 10, then 0. Usually applying a z-index of 50, using the styling z-50, to the wrapper styling of the item you want to appear at the top should give you the result you want. In more complex situations you may need to apply this z-index to the styling sections of texts/images/icons themselves.
The GIF below shows an example of this effect. To start we have my-20 applied to the wrapper styling by default, but we want to apply a negative margin at the top so that these icons will float slightly over the bottom of the hero image, so we delete this styling and add -mt-20. However we want to keep the margin at the bottom, so we also add mb-20. Now we see that the icons are partially hidden underneath the hero image, so we add z-50 and this gives us the effect that we want.
After making in changes in the platform editor, always remember to press "Save section" at the bottom left to save your changes and get a preview to the right.
If you are happy with your changes press "Publish" to make them live on the platform. You could also press "Discard" to delete all your changes after last time you published.
To try explain it as simply as possible:
Padding refers to the additional empty space that exists between the text/image/icon etc. and the edges of the "box" within which this text/image/icon exists.
Margins refer to the additional empty space that exists outside of this "box".
This guide explains how you can edit the padding and margins, which will allow to adjust the layout of everything on your platform.
Basic styling of padding and margins
Note that some elements/sections on your platform will already have padding/margins styling applied, so in this case you should edit the existing styling rather than adding new styling.
For more info about any CMS styling, you can search the Tailwind CSS guides that are available at https://tailwindcss.com/docs .
Equal padding in all directions
When we add padding, it adds empty space internally at the edges of the "box" within which the text/image/icon exists.
We use the styling format p-# (e.g. p-2 or p-4 to add equal padding in all directions).
The GIF below shows how this looks when we have 3 Staylive icons next to each other, initially with zero margins and zero padding, then with p-4 (and zero margins) and then with p-2 (and zero margins) . We've applied an orange background to each icon's "box", to show how this padding is occurring within this "box".
Equal margins in all directions
When we add margins, it adds empty space externally around the edges of the "box" of each text/image/icon.
We use the styling format m-# (e.g. m-2 or m-4 to add equal margins in all directions).
The GIF below shows how this looks when we have 3 Staylive icons next to each other, initially with zero margins and zero padding, then with m-4 (and zero padding) and then with m-2 (and zero padding). The orange background that we applied to each icon's "box" is still applied here, but because margins add empty space externally, the icons cover their entire box and we do not see any of the background colour.
It is often useful to use both padding and margins together. The GIF below shows how this looks when we add both p-2 and m-4, so that we have a little bit of internally space within each icon's box, and slightly larger external space between each of the three boxes.
Advanced styling of padding and margins
In some situations you may want to apply padding and margins only in certain directions, or have overlapping effects of sections/texts/images/icons. The guides below show how these advanced styling methods can be implemented.
Padding in specific directions
As mentioned above, the styling format p-# applies equal padding in all directions, but sometimes you might only want to add padding on certain sides of the text/image/icon.
To do this, we use can use the styling format px-# to only apply padding horizontally (on both the left and right), or py-# to only apply padding vertically (on both the top and bottom).
Even more specifically, we can use the styling formats pt-#, pb-#, pl-# and pr-# to apply padding only on the top, bottom, left and right respectively.
Margins in specific directions
These same styling formats can be used to apply margins only on certain sides of the text/image/icon, but using mx-#, my-#, mt-#, mb-#, ml-# and mr-#.
Negative margins
Sometimes you might want sections/texts/images/icons to overlap each other, to achieve a more flowing effect when scrolling down a page.
We can use the styling format -mt-# on the section/text/image/icon that is positioned lower on the page, which will implement a negatively valued top margin. This has the effect of pulling this section/text/image/icon upwards, but without changing the position of the section/text/image/icon that is positioned above it.
It may also necessary be necessary to edit the z-index of this section. The z-index defines the order in which sections/texts/images/icons appear "on top" or "underneath" each other (similar to how "bring this item to the top" works in Microsoft Powerpoint/Word etc.) The z-index of 50 will appear above the z-index of 40, then 30, then 20, then 10, then 0. Usually applying a z-index of 50, using the styling z-50, to the wrapper styling of the item you want to appear at the top should give you the result you want. In more complex situations you may need to apply this z-index to the styling sections of texts/images/icons themselves.
The GIF below shows an example of this effect. To start we have my-20 applied to the wrapper styling by default, but we want to apply a negative margin at the top so that these icons will float slightly over the bottom of the hero image, so we delete this styling and add -mt-20. However we want to keep the margin at the bottom, so we also add mb-20. Now we see that the icons are partially hidden underneath the hero image, so we add z-50 and this gives us the effect that we want.
Save and publish
After making in changes in the platform editor, always remember to press "Save section" at the bottom left to save your changes and get a preview to the right.
If you are happy with your changes press "Publish" to make them live on the platform. You could also press "Discard" to delete all your changes after last time you published.
Updated on: 04/11/2024
Thank you!