Negative

ネガティブマージンを付与するユーティリティ CSS。

Table of Contents

Basic

  • .is-n{way}-{size} で各方向にマイナスの margin を付与します
  • .is-n-{size} は全方向
  • .is-nt-{size} は上方向
  • .is-nr-{size} は右方向
  • .is-nb-{size} は下方向
  • .is-nl-{size} は左方向
  • .is-ny-{size} は上下方向
  • .is-nx-{size} は左右方向
  • {size} は最大 xxl から最小 xxs まで
サイズ全方向上方向右方向下方向左方向上下方向左右方向
-28px.is-n-xxl.is-nt-xxl.is-nr-xxl.is-nb-xxl.is-nl-xxl.is-ny-xxl.is-nx-xxl
-24px.is-n-xl.is-nt-xl.is-nr-xl.is-nb-xl.is-nl-xl.is-ny-xl.is-nx-xl
-20px.is-n-lg.is-nt-lg.is-nr-lg.is-nb-lg.is-nl-lg.is-ny-lg.is-nx-lg
-16px.is-n-md.is-nt-md.is-nr-md.is-nb-md.is-nl-md.is-ny-md.is-nx-md
-12px.is-n-sm.is-nt-sm.is-nr-sm.is-nb-sm.is-nl-sm.is-ny-sm.is-nx-sm
-8px.is-n-xs.is-nt-xs.is-nr-xs.is-nb-xs.is-nl-xs.is-ny-xs.is-nx-xs
-4px.is-n-xxs.is-nt-xxs.is-nr-xxs.is-nb-xxs.is-nl-xxs.is-ny-xxs.is-nx-xxs
ネガティブマージンテスト
ネガティブマージンテスト
ネガティブマージンテスト
<div>ネガティブマージンテスト</div>
<div class="box is-nt-md">ネガティブマージンテスト</div>
<div>ネガティブマージンテスト</div>

Compatible

推奨のクラス名と同様の効果を互換のあるクラス名で得ることもできます。

推奨のクラス名互換のあるクラス名
.is-n-md.is-margin-minus-md .is-margin-minus
.is-nt-md.is-margin-top-minus-md .is-margin-top-minus
.is-nr-md.is-margin-right-minus-md .is-margin-right-minus
.is-nb-md.is-margin-bottom-minus-md .is-margin-bottom-minus
.is-nl-md.is-margin-left-minus-md .is-margin-left-minus
.is-ny-md.is-margin-vertical-minus-md .is-margin-vertical-minus
.is-nx-md.is-margin-horizontal-minus-md .is-margin-horizontal-minus

Variables

上書きできる変数は以下の通りです。

/* None */

Import

PostCSS で読み込む場合の各パスは以下となります。

@import "musubii/src/utilities/negative/main.css";