Skip to main content

Padding

The padding styles set paddinggs around elements.

There are seven types of padding styles.

  1. Both horizontal and vertical paddings
  2. Horizontal paddings
  3. Vertical paddings
  4. Padding at the top
  5. Padding at the end (this would be the right when text is displayed left-to-right)
  6. Padding at the bottom
  7. Padding at the start (this would be the left when text is displayed left-to-right)

The size of the padding is set with the padding variables.

Combined imports​

If you will use all of the padding styles then you can use the combined import file.

@import 'cacao-css/dist/padding/combined-import.css';

Imports are available for all media query viewport sizes.

@import 'cacao-css/dist/padding/3xs/combined-import.css';
@import 'cacao-css/dist/padding/2xs/combined-import.css';
@import 'cacao-css/dist/padding/xs/combined-import.css';
@import 'cacao-css/dist/padding/sm/combined-import.css';
@import 'cacao-css/dist/padding/md/combined-import.css';
@import 'cacao-css/dist/padding/lg/combined-import.css';
@import 'cacao-css/dist/padding/xl/combined-import.css';
@import 'cacao-css/dist/padding/2xl/combined-import.css';
@import 'cacao-css/dist/padding/3xl/combined-import.css';
@import 'cacao-css/dist/padding/4xl/combined-import.css';
@import 'cacao-css/dist/padding/5xl/combined-import.css';