Lism Tips

余白（padding・margin・gap）

余白を決める Property Class（-p・-m・-g とその向き）の一覧です。使える値は余白のトークン（-p:20 など）で、画面の幅による切り替えにも対応します。

余白を決めるクラスは、-p（padding）・-m（margin）・-g（gap）の3つの仲間に分かれます。どれも、決まった段階の値（余白のトークン）から選んで使います。

padding・margin・gap の違い#

3つとも「すきま」ですが、空く場所が違います。

名前 空く場所 たとえ
padding 箱の内側（枠と中身のあいだ） 箱の中のクッション
margin 箱の外側（となりの要素とのあいだ） 箱のまわりの空き地
gap 並んだ子要素どうしのあいだ 本棚の本と本のあいだ

表示例

-p:20（内側が広い）
-p:5（内側がせまい）
-mx:30（左右の外側が空く）
html
<div class="l--stack -g:20 -p:10 -bd">
  <div class="-p:20 -bgc:base-2">-p:20（内側が広い）</div>
  <div class="-p:5 -bgc:base-2">-p:5（内側がせまい）</div>
  <div class="-p:5 -mx:30 -bgc:base-2">-mx:30（左右の外側が空く）</div>
</div>

この例では、親の -g:20 が箱どうしのすきまを、子の -p が箱の内側を、-mx が箱の左右の外側を決めています。

ヒント

並べた要素のあいだを空けるなら、子に margin を付けるより、親に -g を付けるほうが手軽です。gap は Flexbox や Grid（l--stack・l--flex・l--grid など）で働きます。

使える値（余白のトークン）#

-p:20 の 20 は、余白のトークン（前もって決めた余白の段階）の名前です。-p:20 は var(--s20) を使います。

値 変数 大きさ（目安）
5 --s5 4px
10 --s10 8px
15 --s15 12px
20 --s20 16px
25 --s25 20px
30 --s30 24px
35 --s35 32px
40 --s40 40px
45 --s45 52px
50 --s50 64px
60 --s60 104px
70 --s70 168px
  • 10 の倍数の段（10〜70）は、フィボナッチ数列（1, 2, 3, 5, 8, 13, 21 …と、前の2つを足していく数の並び）で大きくなります。もとになる単位は --s-unit（最初は 0.5rem、約 8px）です
  • 5・15・25・35・45 は、そのあいだを埋める値です。横向きの gap や padding を細かく決めたいときに使います
  • 下の表の「SPACE」は、この表の値のことです

トークンのしくみは デザイントークン（余白・角丸・影など） にあります。文字の大きさに合わせて余白を伸び縮みさせたいときは、Set Class の set--s を使います。

表に無い値を使う#

値の無いクラスと変数を組み合わせると、好きな値を入れられます。

表示例

上下 2em・左右 1em
html
<div class="-p -bd" style="--p: 2em 1em">上下 2em・左右 1em</div>

Padding（内側の余白）#

略した名前 CSS プロパティ 用意された値 BP
p padding 0・SPACE ✔
px padding-inline 0・SPACE ✔
py padding-block 0・SPACE ✔
ps padding-inline-start SPACE ✔
pe padding-inline-end SPACE ✔
pbs padding-block-start SPACE ✔
pbe padding-block-end SPACE ✔
pl padding-left SPACE ✔
pr padding-right SPACE ✔
pt padding-top SPACE ✔
pb padding-bottom SPACE ✔

Margin（外側の余白）#

略した名前 CSS プロパティ 用意された値 BP
m margin auto・0・SPACE ✔
mx margin-inline auto・0・SPACE ✔
my margin-block auto・0・SPACE ✔
ms margin-inline-start auto・SPACE ✔
me margin-inline-end auto・SPACE ✔
mbs margin-block-start auto・0・SPACE ✔
mbe margin-block-end auto・SPACE ✔
ml margin-left SPACE ✔
mr margin-right SPACE ✔
mt margin-top SPACE ✔
mb margin-bottom SPACE ✔

-mx:auto は、幅の決まった箱を左右の真ん中に置くときによく使います。

表示例

真ん中に置いた箱
html
<div class="-w:fit -mx:auto -p:10 -bd">真ん中に置いた箱</div>

Gap（子要素どうしのすきま）#

略した名前 CSS プロパティ 用意された値 BP
g gap 0・SPACE・inherit ✔
cg column-gap SPACE ✔
rg row-gap SPACE ✔

cg は横どうし（列のあいだ）、rg は縦どうし（行のあいだ）のすきまだけを決めます。

表示例

1つめ 2つめ 3つめ 4つめ 5つめ
html
<div class="l--cluster -cg:30 -rg:5">
  <span class="-p:10 -bgc:base-2">1つめ</span>
  <span class="-p:10 -bgc:base-2">2つめ</span>
  <span class="-p:10 -bgc:base-2">3つめ</span>
  <span class="-p:10 -bgc:base-2">4つめ</span>
  <span class="-p:10 -bgc:base-2">5つめ</span>
</div>

向きの名前#

付けるもの 向き 例
x 横（inline） px・mx
y 縦（block） py・my
s・e 文字の書き始め・書き終わりの側 ps・me
bs・be 行の積み始め・積み終わりの側 pbs・mbe
t・b・l・r 上・下・左・右（物理的な向き） pt・ml
補足

pl・mt のような上下左右の向きより、文字の向きに合わせて変わる ps・mbs のような向き（論理方向）を使うことが勧められています。横書きなら ps は左、pbs は上になります。縦書きにすると、向きが自動で入れかわります。

画面の幅で切り替える#

余白のクラスは、どれも _sm・_md・_lg に対応しています。

表示例

スマートフォンでは余白が小さく、広い画面では大きくなります。

-mbs:20 と -mx:30

html
<div class="-p:10 -p_sm -bd" style="--p_sm: var(--s30)">
  <p>スマートフォンでは余白が小さく、広い画面では大きくなります。</p>
  <p class="-mbs:20 -mx:30 -bgc:base-2">-mbs:20 と -mx:30</p>
</div>

p と m は、いまの値がいつも --p・--m で読める作り（alwaysVar）です。くわしくは 画面の幅で切り替える（レスポンシブ） にあります。

React・Astro で書く場合#

略した名前を Props に使います。幅ごとの値は配列で渡します。

jsx
<Lism p={['20', '30']} bd>
  <Text>Example text</Text>
  <Text mbs="20" mx="30">
    Example text
  </Text>
</Lism>

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧