24.7 #Spacing.margin-right Margin-right classes

Toggle example guides Toggle HTML markup

-sf-mr-{auto,zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}

.-sf-mr-auto - auto
.-sf-mr-zero - 0
.-sf-mr-8xs - 1px
.-sf-mr-7xs - 2px
.-sf-mr-6xs - 3px
.-sf-mr-5xs - 4px
.-sf-mr-4xs - 5px
.-sf-mr-3xs - 10px
.-sf-mr-2xs - 15px
.-sf-mr-xs - 20px
.-sf-mr-s - 25px
.-sf-mr-m - 30px
.-sf-mr-l - 35px
.-sf-mr-xl - 40x
.-sf-mr-2xl - 45px
.-sf-mr-3xl - 50px
.-sf-mr-4xl - 55px
.-sf-mr-5xl - 60px
.-sf-mr-6xl - 80px
.-sf-mr-7xl - 100px
.-sf-mr-8xl - 120px
Html
    <div class="-sf-mr-auto">.-sf-mr-auto - auto</div>
    <div class="-sf-mr-zero">.-sf-mr-zero - 0</div>
    <div class="-sf-mr-8xs">.-sf-mr-8xs - 1px</div>
    <div class="-sf-mr-7xs">.-sf-mr-7xs - 2px</div>
    <div class="-sf-mr-6xs">.-sf-mr-6xs - 3px</div>
    <div class="-sf-mr-5xs">.-sf-mr-5xs - 4px</div>
    <div class="-sf-mr-4xs">.-sf-mr-4xs - 5px</div>
    <div class="-sf-mr-3xs">.-sf-mr-3xs - 10px</div>
    <div class="-sf-mr-2xs">.-sf-mr-2xs - 15px</div>
    <div class="-sf-mr-xs">.-sf-mr-xs - 20px</div>
    <div class="-sf-mr-s">.-sf-mr-s - 25px</div>
    <div class="-sf-mr-m">.-sf-mr-m - 30px</div>
    <div class="-sf-mr-l">.-sf-mr-l - 35px</div>
    <div class="-sf-mr-xl">.-sf-mr-xl - 40x</div>
    <div class="-sf-mr-2xl">.-sf-mr-2xl - 45px</div>
    <div class="-sf-mr-3xl">.-sf-mr-3xl  - 50px</div>
    <div class="-sf-mr-4xl">.-sf-mr-4xl - 55px</div>
    <div class="-sf-mr-5xl">.-sf-mr-5xl  - 60px</div>
    <div class="-sf-mr-6xl">.-sf-mr-6xl - 80px</div>
    <div class="-sf-mr-7xl">.-sf-mr-7xl  - 100px</div>
    <div class="-sf-mr-8xl">.-sf-mr-8xl  - 120px</div>