Editor X: Adding Padding to Containers
1 min read
Add padding to containers to create a space between the edges (top, bottom or sides) and the content inside.
Learn more about:
Adding Padding to a Container
Padding can be added to all types of containers, including basic containers, sections, layouters, repeaters, pages and stacks.
You can define the padding for each side of the container individually, in the following units: pixels (px), percentage, (%), viewport width (vw) and viewport height (vh). Additionally, padding can be defined per breakpoint.
To add padding to a container:
- Click the container in your Editor.
- Click the Padding drop-down in the Inspector.
- Enter the padding values for the top, bottom, right or left of the container.
Important Information about Padding
- Elements that have their size set in percentage will change size once the padding is applied. They will be the percentage size of the space in the container, not including the padding.
- If you stretch media to fill a container with padding, the media does not cover the padding. To cover the padding as well, you can add a negative margin to the media. Likewise, if you add padding to a container that is filled with media, the media shrinks so that it does not cover the padding.
- Grids cover the space inside containers excluding the padding. For example, if you have padding on the top of a container that contains a grid, the grid is pushed down below the padding.