Spacing classes are available in both margin and padding, see options below, at all four sides and as horizontal (left|right) and vertical (top|bottom) groups. Additionally each class is available for the breakpoints small (default), medium and large.

Read more about the unit system.

Options

      .ods-[padding|margin]{-top|right|bottom|left|horizontal|vertical}-0{-breakpoint-medium|large}
      .ods-[padding|margin]{-top|right|bottom|left|horizontal|vertical}-1{-breakpoint-medium|large}
      .ods-[padding|margin]{-top|right|bottom|left|horizontal|vertical}-2{-breakpoint-medium|large}
      .ods-[padding|margin]{-top|right|bottom|left|horizontal|vertical}-3{-breakpoint-medium|large}
      .ods-[padding|margin]{-top|right|bottom|left|horizontal|vertical}-4{-breakpoint-medium|large}
      .ods-[padding|margin]{-top|right|bottom|left|horizontal|vertical}-5{-breakpoint-medium|large}
      .ods-[padding|margin]{-top|right|bottom|left|horizontal|vertical}-6{-breakpoint-medium|large}
      .ods-[padding|margin]{-top|right|bottom|left|horizontal|vertical}-8{-breakpoint-medium|large}
      .ods-[padding|margin]{-top|right|bottom|left|horizontal|vertical}-11{-breakpoint-medium|large}
      .ods-[padding|margin]{-top|right|bottom|left|horizontal|vertical}-13{-breakpoint-medium|large}
      .ods-[padding|margin]{-top|right|bottom|left|horizontal|vertical}-19{-breakpoint-medium|large}
      .ods-[padding|margin]{-top|right|bottom|left|horizontal|vertical}-25{-breakpoint-medium|large}
    

Example

      .ods-margin-0
      .ods-margin-horizontal-19
      .ods-padding-8
      .ods-padding-left-13
      .ods-padding-horizontal-8-breakpoint-medium
      .ods-margin-3-breakpoint-large