Padding

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.

ClassDescription
.uk-paddingAdds default padding to the element.
.uk-padding-smallAdds small padding to the element.
.uk-padding-largeAdds large padding to the element.
<div class="uk-padding"></div>
Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="uk-width-1-2@s uk-padding uk-background-muted">
      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.

ClassDescription
.uk-padding-removeRemoves all padding from an element.
.uk-padding-remove-topRemoves top padding from an element.
.uk-padding-remove-bottomRemoves bottom padding from an element.
.uk-padding-remove-leftRemoves left padding from an element.
.uk-padding-remove-rightRemoves right padding from an element.
.uk-padding-remove-verticalRemoves top and bottom padding from an element.
.uk-padding-remove-horizontalRemoves left and right padding from an element.

Theme development

On your tailwind.config.js file, add the Padding component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        padding: {
            hooks: {},
            media: true
        }
    }
}),