Spacing classes

Spacing plays a vital role in web design. This section presents all the global classes that can be used for the spacing purpose on the webpage.

These classes are easy to remember and you can use them throughout your Webflow project. You can also create new classes as per your spacing needs.

Row class

A row, on a webpage, is a horizontal collection of column(s). It is placed within a container.

Class: Row

Margin classes

Margin classes can be used to create margin space between elements. It affects the margin property of an element.

No margin class
This class sets margin to 0px each side.
Class: No Margin
Margin top classes
These classes can be used to set margin-top.
Class: MT0
Set margin top to 0px.
Class: MT10
Set margin top to 10px.
Class: MT20
Set margin top to 20px.
Class: MT30
Set margin top to 30px.
Class: MT40
Set margin top to 40px.
Class: MT50
Set margin top to 50px.
Margin right classes
These classes can be used to set margin-right.
Class: MR0
Set margin right to 0px.
Class: MR5
Set margin right to 5px.
Class: MR10
Set margin right to 10px.
Class: MR20
Set margin right to 20px.
Class: MR30
Set margin right to 30px.
Class: MR40
Set margin right to 40px.
Class: MR50
Set margin right to 50px.
Margin bottom classes
These classes can be used to set margin-bottom.
Class: MB0
Set margin bottom to 0px.
Class: MB10
Set margin bottom to 10px.
Class: MB20
Set margin bottom to 20px.
Class: MB30
Set margin bottom to 30px.
Class: MB40
Set margin bottom to 40px.
Class: MB50
Set margin bottom to 50px.
Margin left classes
These classes can be used to set margin-left.
Class: ML0
Set margin left to 0px.
Class: ML5
Set margin left to 5px.
Class: ML10
Set margin left to 10px.
Class: ML20
Set margin left to 20px.
Class: ML30
Set margin left to 30px.
Class: ML40
Set margin left to 40px.
Class: ML50
Set margin left to 50px.

Padding classes

Padding classes can be used to create padding space within an element. It affects the padding property of an element.

No padding class
This class sets padding to 0px each side.
Class: No Padding
Padding top classes
These classes can be used to set padding-top.
Class: PT0
Set padding top to 0px.
Class: PT10
Set padding top to 10px.
Class: PT20
Set padding top to 20px.
Class: PT30
Set padding top to 30px.
Class: PT40
Set padding top to 40px.
Class: PT50
Set padding top to 50px.
Padding right classes
These classes can be used to set padding-right.
Class: PR0
Set padding right to 0px.
Class: PR10
Set padding right to 10px.
Class: PR20
Set padding right to 20px.
Class: PR30
Set padding right to 30px.
Class: PR40
Set padding right to 40px.
Class: PR50
Set padding right to 50px.
Class: PR100
Set padding right to 100px.
Padding bottom classes
These classes can be used to set padding-bottom.
Class: PB0
Set padding bottom to 0px.
Class: PB10
Set padding bottom to 10px.
Class: PB20
Set padding bottom to 20px.
Class: PB30
Set padding bottom to 30px.
Class: PB40
Set padding bottom to 40px.
Class: PB50
Set padding bottom to 50px.
Padding left classes
These classes can be used to set padding-left.
Class: PL0
Set padding left to 0px.
Class: PL10
Set padding left to 10px.
Class: PL20
Set padding left to 20px.
Class: PL30
Set padding left to 30px.
Class: PL40
Set padding left to 40px.
Class: PL50
Set padding left to 50px.
Class: PL100
Set padding left to 100px.

Vertical spacing classes

These classes can be used to create vertical space before or after any element, or between two elements.
E.g. before an image, after a block, between two text elements, etc.

How to use?
Take a Div element and set any one of these classes (as per your need) to it.

You can create more such classes here based on your design needs.
Class: Space 10
Creates 10px of space.
Class: Space 20
Creates 20px of space.
Class: Space 40
Creates 40px of space.
Class: Space 50
Creates 50px of space.
Class: Space 100
Creates 100px of space.

Column width classes

These classes can be used to set the width to any element.

You can create more such classes here based on your design needs.
Class: Col 12
Assigns width 100%.
Class: Col 11
Assigns width 91.67%.
Class: Col 10
Assigns width 83.33%.
Class: Col 9
Assigns width 75%.
Class: Col 8
Assigns width 66.67%.
Class: Col 7
Assigns width 58.33%.
Class: Col 6
Assigns width 50%.
Class: Col 5
Assigns width 41.67%.
Class: Col 4
Assigns width 33.33%.
Class: Col 3
Assigns width 25%.
Class: Col 2
Assigns width 16.67%.
Class: Col 1
Assigns width 8.33%.

Positioning classes

These classes can be used to set the position of any element.

Class: Float Left
It sets float to left.
Class: Float Right
It sets float to right.

Hide elements

These classes can be used to show or hide any element on specific screens.
For example, there is a Div with a spacing class. It needs to be displayed on the mobile screens only. In this case, you can use class "Show M".

You can create more such classes based on your needs.

Class
Desktop
Tablet
Mobile
Landscape
Mobile Portrait
Hide L
Show
Hide
Hide
Hide
Hide M
Show
Show
Hide
Hide
Hide S
Show
Show
Show
Hide
Show L
Hide
Show
Show
Show
Show M
Hide
Hide
Show
Show
Show S
Hide
Hide
Hide
Show