Translate
Spacing classes
Adjust margin and padding spacing around page elements using spacing classes. Margin or padding can be removed from one side or all sides.
Also you can increase padding/margin to 1rem (16px), 1.5rems (24px) or 3rems (48px).
Example: Remove top margin from heading
Title
Lorem ipsum dolor sit amet, his nisl mundi at. Eu mei dicam aperiri splendide. Perfecto voluptatibus ut vis, ea porro graecis nostrum eos, nostro scripserit sea ei. Ex eam dolores omittantur, no pri animal docendi, mundi definitiones has in.
Lorem ipsum dolor sit amet, his nisl mundi at. Eu mei dicam aperiri splendide. Perfecto voluptatibus ut vis, ea porro graecis nostrum eos, nostro scripserit sea ei. Ex eam dolores omittantur, no pri animal docendi, mundi definitiones has in.
Lorem ipsum dolor sit amet, his nisl mundi at. Eu mei dicam aperiri splendide. Perfecto voluptatibus ut vis, ea porro graecis nostrum eos, nostro scripserit sea ei. Ex eam dolores omittantur, no pri animal docendi, mundi definitiones has in.
Lorem ipsum dolor sit amet, his nisl mundi at. Eu mei dicam aperiri splendide. Perfecto voluptatibus ut vis, ea porro graecis nostrum eos, nostro scripserit sea ei. Ex eam dolores omittantur, no pri animal docendi, mundi definitiones has in.
Example: Add 1.5x padding to left of image
Lorem ipsum dolor sit amet, his nisl mundi at. Eu mei dicam aperiri splendide. Perfecto voluptatibus ut vis, ea porro graecis nostrum eos, nostro scripserit sea ei. Ex eam dolores omittantur, no pri animal docendi, mundi definitiones has in.
Lorem ipsum dolor sit amet, his nisl mundi at. Eu mei dicam aperiri splendide. Perfecto voluptatibus ut vis, ea porro graecis nostrum eos, nostro scripserit sea ei. Ex eam dolores omittantur, no pri animal docendi, mundi definitiones has in.
Lorem ipsum dolor sit amet, his nisl mundi at. Eu mei dicam aperiri splendide. Perfecto voluptatibus ut vis, ea porro graecis nostrum eos, nostro scripserit sea ei. Ex eam dolores omittantur, no pri animal docendi, mundi definitiones has in.
Lorem ipsum dolor sit amet, his nisl mundi at. Eu mei dicam aperiri splendide. Perfecto voluptatibus ut vis, ea porro graecis nostrum eos, nostro scripserit sea ei. Ex eam dolores omittantur, no pri animal docendi, mundi definitiones has in.
Available spacing classes
| Description (spacer = 1rem/16px) | Class |
|---|---|
| Remove all margins | .m-a-0 |
| Remove top margin | .m-t-0 |
| Remove right margin | .m-r-0 |
| Remove bottom margin | .m-b-0 |
| Remove left margin | .m-l-0 |
| Remove left & right margin | .m-x-0 |
| Remove top & bottom margin | .m-y-0 |
| 1x spacer margin to all sides | .m-a |
| 1x spacer margin to top | .m-t |
| 1x spacer margin to right | .m-r |
| 1x spacer margin to bottom | .m-b |
| 1x spacer margin to left | .m-l |
| 1x spacer margin to left & right | .m-x |
| 1x spacer margin to top & bottom | .m-y |
| margin auto to left and right | .m-x-auto |
| 1.5x spacer margin to all sides | .m-a-md |
| 1.5x spacer margin to top | .m-t-md |
| 1.5x spacer margin to right | .m-r-md |
| 1.5x spacer margin to bottom | .m-b-md |
| 1.5x spacer margin to left | .m-l-md |
| 1.5x spacer margin to left & right | .m-x-md |
| 1.5x spacer margin to top & bottom | .m-y-md |
| 3x spacer margin to all sides | .m-a-lg |
| 3x spacer margin to top | .m-t-lg |
| 3x spacer margin to right | .m-r-lg |
| 3x spacer margin to bottom | .m-b-lg |
| 3x spacer margin to left | .m-l-lg |
| 3x spacer margin to left & right | .m-x-lg |
| 3x spacer margin to top & bottom | .m-y-lg |
| Remove all padding | .p-a-0 |
| Remove top padding | .p-t-0 |
| Remove right padding | .p-r-0 |
| Remove bottom padding | .p-b-0 |
| Remove left padding | .p-l-0 |
| Remove left & right padding | .p-x-0 |
| Remove top & bottom padding | .p-y-0 |
| 1x spacer padding to all sides | .p-a |
| 1x spacer padding to top | .p-t |
| 1x spacer padding to right | .p-r |
| 1x spacer padding to bottom | .p-b |
| 1x spacer padding to left | .p-l |
| 1x spacer padding to left & right | .p-x |
| 1x spacer padding to top & bottom | .p-y |
| 1.5x spacer padding to all sides | .p-a-md |
| 1.5x spacer padding to top | .p-t-md |
| 1.5x spacer padding to right | .p-r-md |
| 1.5x spacer padding to bottom | .p-b-md |
| 1.5x spacer padding to left | .p-l-md |
| 1.5x spacer padding to left & right | .p-x-md |
| 1.5x spacer padding to top & bottom | .p-y-md |
| 3x spacer padding to all sides | .p-a-lg |
| 3x spacer padding to top | .p-t-lg |
| 3x spacer padding to right | .p-r-lg |
| 3x spacer padding to bottom | .p-b-lg |
| 3x spacer padding to left | .p-l-lg |
| 3x spacer padding to left & right | .p-x-lg |
| 3x spacer padding to top & bottom | .p-y-lg |