Skip to main content

Margins

The margin styles set margings around elements.

There are seven types of margin styles.

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

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

Combined imports​

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

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

Imports are available for all media query viewport sizes.

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