Padding on a major section, like a main content block or “div” (in web terms), controls the internal space between the content inside that section and the edge of the section itself. This is often used to prevent your content from touching the very top, bottom, or sides of a section.
Step-by-Step Guide
- Select the Container Element:
- Click directly on the Page Section (the entire background block) or the larger Layout/Block element you want to add padding to.
- Tip: Sometimes, clicking an inner element first and then clicking the parent element’s label or using the breadcrumbs (navigation tree below the view) can help you select the main container.
- Access Component Settings:
- The right-side panel will update to show the settings for the selected section or block.
- Go to the Styles tab.
- Locate Spacing:
- Scroll down within the Styles tab until you find the Spacing section.
- Apply Padding:
- You will see fields for Top, Bottom, Left, and Right padding.
- Increase the numerical value (in pixels,
px) for the sides where you want to add space.- Top/Bottom Padding: This is commonly used to add vertical space between the content and the section above and below it, giving your entire page more flow and white space.
- Left/Right Padding: This is often set to ensure your text and elements don’t get too close to the edges of the browser window.
💡 Remember the Rule: Padding always affects the inside space and makes the background color/image of that block/section expand. Margin affects the outside space and pushes other sections away from this one.
Key Concept for Layouts: Padding vs. Margin
When working with large layouts in Landerlab:
- To create space inside your container (to keep your text/images away from the section boundary), use Padding on the Page Section.
- To create space between two different Page Sections (to push the section above or below it away), use Margin on the relevant section.