Bubble Docs
Search…
Margins
Margins are extra space around an element. Margins now define the overall size of a visual element on the page and how it interacts with elements around it in both fixed and responsive layouts.
For example, in a fixed container layout, margins can be used to provide even spacing around elements in a form. In a row container layout, margins will be added to the min and max width of the element to inform when the element should wrap to the next row.
In addition, margins will align and snap based on the margin border, not the element border. If the margin is 0, the margin border and element border will be the same.
Margin controls are available on all elements in the Layout tab of the property editor. These controls are also available in conditional statements to replace the legacy responsive “collapse margins” functionality.
Tip: In a responsive container, margins will help you position a child element where you want it once you have selected the appropriate alignment option. For example, if you have a button in a column container and you want the button to be 30px from the bottom of the container, simply bottom-align the button and add 30px of margin to the bottom of the button element.
​

Top

Specify the amount of margin at the top of the element in pixels.
Specify the amount of margin on the right side of the element in pixels.

Bottom

Specify the amount of margin to the bottom of the element in pixels.

Left

Specify the amount of margin on the left side of the element in pixels.
​
Last modified 2mo ago
Copy link