Padding

パディングを付与するユーティリティ CSS。

Table of Contents

Basic

  • .is-p{way}-{size} で各方向に padding を付与します
  • .is-p-{size} は全方向
  • .is-pt-{size} は上方向
  • .is-pr-{size} は右方向
  • .is-pb-{size} は下方向
  • .is-pl-{size} は左方向
  • .is-py-{size} は上下方向
  • .is-px-{size} は左右方向
  • {size} は最大 xxl から最小 xxs に加え none safe を指定できます
  • safe は iOS Safari のセーフエリアパディングです
サイズ全方向上方向右方向下方向左方向上下方向左右方向
28px.is-p-xxl.is-pt-xxl.is-pr-xxl.is-pb-xxl.is-pl-xxl.is-py-xxl.is-px-xxl
24px.is-p-xl.is-pt-xl.is-pr-xl.is-pb-xl.is-pl-xl.is-py-xl.is-px-xl
20px.is-p-lg.is-pt-lg.is-pr-lg.is-pb-lg.is-pl-lg.is-py-lg.is-px-lg
16px.is-p-md.is-pt-md.is-pr-md.is-pb-md.is-pl-md.is-py-md.is-px-md
12px.is-p-sm.is-pt-sm.is-pr-sm.is-pb-sm.is-pl-sm.is-py-sm.is-px-sm
8px.is-p-xs.is-pt-xs.is-pr-xs.is-pb-xs.is-pl-xs.is-py-xs.is-px-xs
4px.is-p-xxs.is-pt-xxs.is-pr-xxs.is-pb-xxs.is-pl-xxs.is-py-xxs.is-px-xxs
0.is-p-none.is-pt-none.is-pr-none.is-pb-none.is-pl-none.is-py-none.is-px-none
safe.is-p-safe.is-pt-safe.is-pr-safe.is-pb-safe.is-pl-safe.is-py-safe.is-px-safe
パディングテスト
パディングテスト
パディングテスト
<div>パディングテスト</div>
<div class="box is-pt-md">パディングテスト</div>
<div>パディングテスト</div>

Compatible

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

推奨のクラス名互換のあるクラス名
.is-p-md.is-padding-md .is-padding
.is-pt-md.is-padding-top-md .is-padding-top
.is-pr-md.is-padding-right-md .is-padding-right
.is-pb-md.is-padding-bottom-md .is-padding-bottom
.is-pl-md.is-padding-left-md .is-padding-left
.is-py-md.is-padding-vertical-md .is-padding-vertical
.is-px-md.is-padding-horizontal-md .is-padding-horizontal

Variables

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

/* None */

Import

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

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