Negative Values (neg-)
Adding the neg- prefix applies a negative value. Only available for properties that allow negative values per the CSS spec.
Basic Syntax
Format: neg- + existing class. Example: mt10px → neg-mt10px
<!-- margin-top: -10px -->
<div class="neg-mt10px">...</div>
<!-- transform: translateX(-50%) -->
<div class="neg-ttx50p">...</div>
<!-- z-index: -1 -->
<div class="neg-zi1">...</div>Allowed Properties
아래 속성에서만 neg-를 사용할 수 있습니다.
| Category | Property | Example | CSS |
|---|---|---|---|
| Margin | margin-top | neg-mt10px | margin-top: -10px |
| Margin | margin-right | neg-mr16px | margin-right: -16px |
| Margin | margin-bottom | neg-mb2rem | margin-bottom: -20px |
| Margin | margin-left | neg-ml8px | margin-left: -8px |
| Position | top | neg-t10px | top: -10px |
| Position | right | neg-r5px | right: -5px |
| Position | bottom | neg-b1rem | bottom: -10px |
| Position | left | neg-l50p | left: -50% |
| Typography | letter-spacing | neg-ls1px | letter-spacing: -1px |
| Typography | word-spacing | neg-ws2px | word-spacing: -2px |
| Typography | text-indent | neg-ti2rem | text-indent: -20px |
| Other | outline-offset | neg-oo2px | outline-offset: -2px |
| Other | z-index | neg-zi5 | z-index: -5 |
| Other | order | neg-order1 | order: -1 |
| Transform | translateX | neg-ttx50p | transform: translateX(-50%) |
| Transform | translateY | neg-tty50p | transform: translateY(-50%) |
| Transform | rotate | neg-tr90deg | transform: rotate(-90deg) |
Disallowed Properties
The following properties do not allow negative values per the CSS spec, so neg- does not work with them.
paddingwidthheightmin-widthmax-widthmin-heightmax-heightfont-sizeline-heightgaprow-gapcolumn-gapborder-radiusborder-widthopacityUsage Examples
<!-- ═══ Center positioning (Most common pattern) ═══ -->
<!-- absolute + translate(-50%, -50%) -->
<div class="pa t50p l50p neg-ttx50p neg-tty50p">
Centered
</div>
<!-- Modal dialog -->
<div class="pf t50p l50p neg-ttx50p neg-tty50p w40rem bg18181B br12px p3-2rem zi999">
<h2 class="fs2rem fw700 cFAFAFA mb16px">Modal Title</h2>
<p class="c71717A">Modal Content</p>
</div>
<!-- ═══ Element overlap (negative margin) ═══ -->
<!-- Card overlap effect -->
<div class="df">
<div class="w8rem h8rem br50p bgFF6B6B zi3"></div>
<div class="w8rem h8rem br50p bg6366F1 neg-ml2rem zi2"></div>
<div class="w8rem h8rem br50p bg34D399 neg-ml2rem zi1"></div>
</div>
<!-- Text area overlapping image -->
<div class="pr">
<img class="w100p" />
<div class="pr neg-mt6rem p2rem bg0-0-0-70 cFFFFFF">
Text overlapping the image
</div>
</div>
<!-- Overlap between sections (visual connection) -->
<section class="bg6366F1 p4rem pb8rem cFFFFFF">Top section</section>
<section class="neg-mt4rem mxa maxw80rem bgFFFFFF br12px p3-2rem">
Overlaps 40px with section above, visible like a card
</section>
<!-- ═══ z-index ═══ -->
<!-- Background decorative element -->
<div class="pa neg-zi1 t0 l0 w100p h100p o30">
Decoration behind background
</div>
<!-- ═══ Typography ═══ -->
<!-- Tight letter-spacing -->
<h1 class="fs6rem fw900 neg-ls2px ttu">
BOLD TITLE
</h1>
<!-- Reduce word gap -->
<p class="fs1-4rem neg-ws1px">
Text with narrow word spacing
</p>
<!-- Negative text indent -->
<p class="neg-ti2rem pl2rem">
Text style where first line protrudes to the left
</p>
<!-- ═══ Position fine-tuning ═══ -->
<!-- Badge outside border -->
<div class="pr">
<span class="pa neg-t8px neg-r8px bg-FF0000 cFFFFFF br50p w2rem h2rem df jcc aic fs12px">3</span>
Notification icon
</div>
<!-- Outline offset inward -->
<button class="b2pxsolid6366F1 neg-oo2px cp p12px-2rem">
Focus ring moves inward
</button>
<!-- ═══ Reorder with order ═══ -->
<!-- Show image first on mobile -->
<div class="df fdc">
<div class="neg-order1">This element appears first (order: -1)</div>
<div>Element that was originally first</div>
</div>