Spacing

Use following classes to add extra spacing.

Examples display outside spacing (margin) on the left and inside spacing (padding) on the right.

All around spacing

Vertical spacing

Directional vertical spacing

• use classes ecl-u-mt-* or ecl-u-pt-* to add spacing only on top
• use classes ecl-u-mb-* or ecl-u-pb-* to add spacing below.

Horizontal spacing

Directional horizontal spacing

• use classes ecl-u-ml-* or ecl-u-pl-* to add spacing only on the start
• use classes ecl-u-mr-* or ecl-u-pr-* to add spacing on the end

Other spacing

• use classes ecl-u-m*-auto to set margin auto (horizontal, vertical or any direction)
• use classes ecl-u-m*-none or ecl-u-p*-none to set margin or padding to zero.

Responsive spacing

Add the breakpoint before spacing size to display it only with corresponding screen size (works for all kind of spacing ahead).

Examples:

• spacing l on screen size >= breakpoint m
  ecl-u-ma-m-l

  ecl-u-pa-m-l
• horizontal spacing 2xl on screen size >= breakpoint l
  ecl-u-mh-l-2xl

  ecl-u-ph-l-2xl
• no left spacing on screen size >= breakpoint s
  ecl-u-ml-s-none

  ecl-u-pl-s-none