Spacing Options Overview

The spacing options allow you to define the spacing of an HTML element.

Padding

The padding property specifies the space within an element, between its content and its border. It adds extra space inside the border of an HTML element. The padding values can be set in px, em, or % units.

Padding Top

This field adds space between the HTML element and its top border.

top:20px

Padding Right

This field adds space between the HTML element and its right border.

right:20px

Padding Bottom

This field adds space between the HTML element and its bottom border.

bottom:20px

Padding Left

This field adds space between the HTML element and its left border.

left:20px

Link Sides

When the Link sides option is enabled, all top/right/bottom/left values will sync. This option helps you work more efficiently.

Margin

The margin property specifies the space outside an element’s border. It is used to create space between elements and control the distance between them. The value of margin property can be Auto or numbers set in px, em, or % units.

Margin Top

This field adds space outside the HTML element’s top border.

margin-top:40px
Two

Margin Right

This field adds space outside the HTML element’s right border.

margin-right:40px
Two
margin-right:auto
Two

Margin Bottom

This field adds space outside the HTML element’s bottom border.

margin-bottom:40px
Two

Margin Left

This field adds space outside the HTML element’s left border.

margin-left:40px
Two
margin-left:auto
Two

Link Sides

When the Link sides option is enabled, all top/right/bottom/left values will sync. This option helps you work more efficiently.

Border Size

The Border size option is using the border-width CSS property which specifies the width of an element’s border. The border-width values can be set in px, em, or % units.

Border Top Width

This field specifies the width of the HTML element’s top border.

border-top-width:5px

Border right Width

This field adds space outside the HTML element’s right border.

border-right-width:5px

Border bottom Width

This field adds space outside the HTML element’s bottom border.

border-bottom-width:5px

Border left Width

This field adds space outside the HTML element’s left border.

border-left-width:5px

Link Sides

When the Link sides option is enabled, all top/right/bottom/left values will sync. This option helps you work more efficiently.

Border Radius

The border-radius property sets the rounding of an element’s corners. It is used to create rounded corners on elements like boxes, buttons, or images. The border-radius values can be set in px, em, or % units.

Border Top Left Radius

This field defines how round the HTML element’s top left corner would be.

border-top-left-radius:20px

Border Top Right Radius

This field defines how round the HTML element’s top right corner would be.

border-top-right-radius:20px

Border Bottom Right Radius

This field defines how round the HTML element’s bottom right corner would be.

border-bottom-right-radius:20px

Border Bottom Left Radius

This field defines how round the HTML element’s bottom left corner would be.

border-bottom-left-radius:20px

Link Sides

When the Link sides option is enabled, all top/right/bottom/left values will sync. This option helps you work more efficiently.

Visit MDN Web Docs, W3Schools, and CSS-TRICKS to learn more about the options.