Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Padding and margin can add space or breathing room inside or outside of an element's boundary. Padding creates space on the inside of an element, while margin creates space on the outside of an element. These properties make it possible to create responsive websites whose content reflows while creating consistent spacing.
Select an element and style the margin or padding on one side of the element by clicking and dragging on the padding or margin control.
You can also click into a padding or margin value and type in a value and unit manually.
You can easily change spacing for complementary sides, like both top and bottom or left and right. Hold option (or alt on Windows) while dragging one of the margin/padding handles will affect the opposite sides. For example: holding option/alt while dragging the Top Margin handle will add the same value for the Bottom Margin.
Holding down shift and grabbing the padding (or margin) of one side will apply the same value to the other three sides of that property.
We can add a negative margin to an element to cause it to move outside of its normal place on the page. Negative margins can be used to overlap the element with other surrounding elements.
Setting a margin of “auto” on certain elements will make that margin side behave like a spring that pushes the element.
Here’s an example using auto on the left and right margins to center a block element.
You can also click on the Center Element button on the right of the margin and padding controls to set these automatically.
In some situations, margins of adjacent elements combine to form a single margin. This can be confusing as it happens only in certain situations and can be overwritten in others. Learn more about collapsing margins.
One known issue with collapsing margins is where the content in the footer of a page is cut off. And, you are not able to access it or scroll to it even in the Designer. That's because the content is being pushed out of the body element at the bottom of the page. This issue usually occurs when using an absolutely positioned navbar.
To avoid this issue, don’t add a top margin on the first element on your page when that element doesn't have a fixed position. Instead, add a top padding to the body element.
Something went wrong while submitting the form. Please contact support@webflow.com
Have feedback on the feature?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Oops! Something went wrong while submitting the form
Oops! Something went wrong while submitting the form