Padding

Ready Added in 2.0.0

A collection of utility classes to add spacing between elements and their content.

Usage

To apply this component, add one of the following classes to a block element.

Class Description
.gls-padding Adds default padding to the element.
.gls-padding-small Adds small padding to the element.
.gls-padding-large Adds large padding to the element.
<div class="gls-padding"></div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="gls-padding gls-background-muted gls-width-1-2@s">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    

Remove padding

In some cases you want to remove padding from an element, rather than adding it. To do so, apply one of the following classes.

Class Description
.gls-padding-remove Removes all padding from an element.
.gls-padding-remove-top Removes top padding from an element.
.gls-padding-remove-bottom Removes bottom padding from an element.
.gls-padding-remove-left Removes left padding from an element.
.gls-padding-remove-right Removes right padding from an element.
.gls-padding-remove-vertical Removes top and bottom padding from an element.
.gls-padding-remove-horizontal Removes left and right padding from an element.