What is Spacing?

In the context of Refoundry, ‘Spacing’ refers to the Padding and Margin settings used to control the distance between elements and their surrounding content. Padding adds space inside an element’s border, while Margin adds space outside the element, affecting how it interacts with other elements on the page. These settings help create a balanced and visually appealing layout.

How it Works

Margin and Padding are key settings used to control the spacing around and within elements, respectively. Understanding how these work is essential for creating well-structured and visually appealing layouts.

Padding

Padding refers to the space inside an element, between its content and its border. Adjusting the Padding increases or decreases the distance between the element’s content and its edges, creating internal space that can help to highlight or separate content from its border. In Refoundry, Padding can be applied uniformly to all sides of an element, or individually to the top, right, bottom, and left sides, allowing for precise control over the element’s internal spacing.

Adding Padding to a button ensures that the text inside the button is not too close to the edges, making it more readable and visually balanced. See Padding on MDN for more information on padding.

Margin

Margin refers to the space outside of an element’s border, affecting the distance between the element and surrounding elements. Adjusting the Margin increases or decreases the space around the element, which can be used to separate it from other elements or control its placement within a layout. Like Padding, Margin can be applied uniformly or individually to the top, right, bottom, and left sides of an element.

When Auto is applied to a block-level element like a button, it automatically distributes any available horizontal space equally on both sides. This centers the element within its parent container, as the Margins on the left and right are adjusted to balance the space. This is commonly used to horizontally center buttons or other elements in flexible or responsive layouts.

Adding Margin to a column block can create space between it and adjacent columns, ensuring they don’t touch and maintaining a clean, organized appearance. See Margin on MDN for more information on margin.

Responsive Design

In Refoundry, both Margin and Padding settings can be adjusted for different screen sizes, ensuring that your layout adapts seamlessly across devices via the Responsive Block Setting controls. This flexibility is crucial for maintaining a consistent and user-friendly design on desktops, tablets, and mobile devices.