Padding

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

Table of Contents

• Basic
• Compatible
• Variables
• Import

Basic

• .is-padding-{way}-{size} で各方向に padding を付与します
• .is-padding-{size} は全方向（※.is-p-{size} に短縮可能）
• .is-padding-top-{size} は上方向（※.is-pt-{size} に短縮可能）
• .is-padding-right-{size} は右方向（※.is-pr-{size} に短縮可能）
• .is-padding-bottom-{size} は下方向（※.is-pb-{size} に短縮可能）
• .is-padding-left-{size} は左方向（※.is-pl-{size} に短縮可能）
• .is-padding-vertical-{size} は上下方向（※.is-py-{size} に短縮可能）
• .is-padding-horizontal-{size} は上下方向（※.is-px-{size} に短縮可能）
• {size} は最大 xxl から最小 xxs に加え none safe を指定できます
• safe は iOS Safari のセーフエリアパディングです

<div>パディングテスト</div>
<div class="box is-pt-md">パディングテスト</div>
<div>パディングテスト</div>

Compatible

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

Variables

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

/* None */

Import

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

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