24.10 #Spacing.margin-top-negative Margin-top negative classes

Toggle example guides Toggle HTML markup

-sf-mt--{6xl, 5xl, 4xl, 3xl, 2xl, xl, l, m, s, xs, 2xs, 3xs, 4xs}

.-sf-mt--6xl - -80px
.-sf-mt--5xl - -60px
.-sf-mt--4xl - -55px
.-sf-mt--3xl - -50px
.-sf-mt--2xl - -45px
.-sf-mt--xl - -40x
.-sf-mt--l - -35px
.-sf-mt--m - -30px
.-sf-mt--s - -25px
.-sf-mt--xs - -20px
.-sf-mt--2xs - -15px
.-sf-mt--3xs - -10px
.-sf-mt--4xs - -5px
Html
    <div class="--sf-mt--6xl">.-sf-mt--6xl - -80px</div>
    <div class="--sf-mt--5xl">.-sf-mt--5xl  - -60px</div>
    <div class="--sf-mt--4xl">.-sf-mt--4xl - -55px</div>
    <div class="--sf-mt--3xl">.-sf-mt--3xl  - -50px</div>
    <div class="--sf-mt--2xl">.-sf-mt--2xl - -45px</div>
    <div class="--sf-mt--xl">.-sf-mt--xl - -40x</div>
    <div class="--sf-mt--l">.-sf-mt--l - -35px</div>
    <div class="--sf-mt--m">.-sf-mt--m - -30px</div>
    <div class="--sf-mt--s">.-sf-mt--s - -25px</div>
    <div class="--sf-mt--xs">.-sf-mt--xs - -20px</div>
    <div class="--sf-mt--2xs">.-sf-mt--2xs - -15px</div>
    <div class="--sf-mt--3xs">.-sf-mt--3xs - -10px</div>
    <div class="--sf-mt--4xs">.-sf-mt--4xs - -5px</div>