【賢威8】margin[距離]とpadding[余白]の指定方法

賢威8ではあらかじめ親テーマでで用意されているデザインパーツ（スタイル）が複数ございます。
今回はボックス（要素）同士の距離や、ボックス（要素）内の余白を指定するデザインパーツを紹介させていただきます。

paddingを指定する

上下左右に20pxの余白をつくります。上下左右に20pxの余白をつくります。上下左右に20pxの余白をつくります。上下左右に20pxの余白をつくります。

上に20pxの余白をつくります。上に20pxの余白をつくります。上に20pxの余白をつくります。上に20pxの余白をつくります。

右に20pxの余白をつくります。右に20pxの余白をつくります。右に20pxの余白をつくります。右に20pxの余白をつくります。

下に20pxの余白をつくります。下に20pxの余白をつくります。下に20pxの余白をつくります。下に20pxの余白をつくります。

左に20pxの余白をつくります。左に20pxの余白をつくります。左に20pxの余白をつくります。左に20pxの余白をつくります。

HTML

<p class="bdr_black p20">上下左右に20pxの余白をつくります。上下左右に20pxの余白をつくります。上下左右に20pxの余白をつくります。上下左右に20pxの余白をつくります。</p>
<p class="bdr_black p20-t">上に20pxの余白をつくります。上に20pxの余白をつくります。上に20pxの余白をつくります。上に20pxの余白をつくります。</p>
<p class="bdr_black p20-r">右に20pxの余白をつくります。右に20pxの余白をつくります。右に20pxの余白をつくります。右に20pxの余白をつくります。</p>
<p class="bdr_black p20-b">下に20pxの余白をつくります。下に20pxの余白をつくります。下に20pxの余白をつくります。下に20pxの余白をつくります。</p>
<p class="bdr_black p20-l">左に20pxの余白をつくります。左に20pxの余白をつくります。左に20pxの余白をつくります。左に20pxの余白をつくります。</p>

用意されているスタイル

p0・・・上下左右に0pxの余白を指定する
p0-t・・・上に0pxの余白を指定する
p0-r・・・右に0pxの余白を指定する
p0-b・・・下に0pxの余白を指定する
p0-l・・・左に0pxの余白を指定する

p5・・・上下左右に5pxの余白を指定する
p5-t・・・上に5pxの余白を指定する
p5-r・・・右に5pxの余白を指定する
p5-b・・・下に5pxの余白を指定する
p5-l・・・左に5pxの余白を指定する

p10・・・上下左右に10pxの余白を指定する
p10-t・・・上に10pxの余白を指定する
p10-r・・・右に10pxの余白を指定する
p10-b・・・下に10pxの余白を指定する
p10-l・・・左に10pxの余白を指定する

p15・・・上下左右に15pxの余白を指定する
p15-t・・・上に15pxの余白を指定する
p15-r・・・右に15pxの余白を指定する
p15-b・・・下に15pxの余白を指定する
p15-l・・・左に15pxの余白を指定する

p20・・・上下左右に20pxの余白を指定する
p20-t・・・上に20pxの余白を指定する
p20-r・・・右に20pxの余白を指定する
p20-b・・・下に20pxの余白を指定する
p20-l・・・左に20pxの余白を指定する

p25・・・上下左右に25pxの余白を指定する
p25-t・・・上に25pxの余白を指定する
p25-r・・・右に25pxの余白を指定する
p25-b・・・下に25pxの余白を指定する
p25-l・・・左に25pxの余白を指定する

p30・・・上下左右に30pxの余白を指定する
p30-t・・・上に30pxの余白を指定する
p30-r・・・右に30pxの余白を指定する
p30-b・・・下に30pxの余白を指定する
p30-l・・・左に30pxの余白を指定する

p40・・・上下左右に40pxの余白を指定する
p40-t・・・上に40pxの余白を指定する
p40-r・・・右に40pxの余白を指定する
p40-b・・・下に40pxの余白を指定する
p40-l・・・左に40pxの余白を指定する

p50・・・上下左右に50pxの余白を指定する
p50-t・・・上に50pxの余白を指定する
p50-r・・・右に50pxの余白を指定する
p50-b・・・下に50pxの余白を指定する
p50-l・・・左に50pxの余白を指定する

p60・・・上下左右に60pxの余白を指定する
p60-t・・・上に60pxの余白を指定する
p60-r・・・右に60pxの余白を指定する
p60-b・・・下に60pxの余白を指定する
p60-l・・・左に60pxの余白を指定する

p70・・・上下左右に70pxの余白を指定する
p70-t・・・上に70pxの余白を指定する
p70-r・・・右に70pxの余白を指定する
p70-b・・・下に70pxの余白を指定する
p70-l・・・左に70pxの余白を指定する

p80・・・上下左右に80pxの余白を指定する
p80-t・・・上に80pxの余白を指定する
p80-r・・・右に80pxの余白を指定する
p80-b・・・下に80pxの余白を指定する
p80-l・・・左に80pxの余白を指定する

p90・・・上下左右に90pxの余白を指定する
p90-t・・・上に90pxの余白を指定する
p90-r・・・右に90pxの余白を指定する
p90-b・・・下に90pxの余白を指定する
p90-l・・・左に90pxの余白を指定する

p100・・・上下左右に100pxの余白を指定する
p100-t・・・上に100pxの余白を指定する
p100-r・・・右に100pxの余白を指定する
p100-b・・・下に100pxの余白を指定する
p100-l・・・左に100pxの余白を指定する

marginを指定する

HTML

<p class="bdr_black m20">上下左右周りからの距離を20px空けます。</p>
<p class="bdr_black m20-t">上のブロックとの距離を20px空けます。</p>
<p class="bdr_black m20-b">下のブロックとの距離を20px空けます。</p>
<p class="bdr_black m20-r">右のブロックとの距離を20px空けます。</p>
<p class="bdr_black m20-l">左のブロックとの距離を20px空けます。</p>

用意されているスタイル

m0・・・上下左右周りからの距離を0px空ける
m0-t・・・上のブロックとの距離を0px空ける
m0-r・・・右のブロックとの距離を0px空ける
m0-b・・・下のブロックとの距離を0px空ける
m0-l・・・左のブロックとの距離を0px空ける

m5・・・上下左右周りからの距離を5px空ける
m5-t・・・上のブロックとの距離を5px空ける
m5-r・・・右のブロックとの距離を5px空ける
m5-b・・・下のブロックとの距離を5px空ける
m5-l・・・左のブロックとの距離を5px空ける

m10・・・上下左右周りからの距離を10px空ける
m10-t・・・上のブロックとの距離を10px空ける
m10-r・・・右のブロックとの距離を10px空ける
m10-b・・・下のブロックとの距離を10px空ける
m10-l・・・左のブロックとの距離を10px空ける

m15・・・上下左右周りからの距離を15px空ける
m15-t・・・上のブロックとの距離を15px空ける
m15-r・・・右のブロックとの距離を15px空ける
m15-b・・・下のブロックとの距離を15px空ける
m15-l・・・左のブロックとの距離を15px空ける

m20・・・上下左右周りからの距離を20px空ける
m20-t・・・上のブロックとの距離を20px空ける
m20-r・・・右のブロックとの距離を20px空ける
m20-b・・・下のブロックとの距離を20px空ける
m20-l・・・左のブロックとの距離を20px空ける

m25・・・上下左右周りからの距離を25px空ける
m25-t・・・上のブロックとの距離を25px空ける
m25-r・・・右のブロックとの距離を25px空ける
m25-b・・・下のブロックとの距離を25px空ける
m25-l・・・左のブロックとの距離を25px空ける

m30・・・上下左右周りからの距離を30px空ける
m30-t・・・上のブロックとの距離を30px空ける
m30-r・・・右のブロックとの距離を30px空ける
m30-b・・・下のブロックとの距離を30px空ける
m30-l・・・左のブロックとの距離を30px空ける

m40・・・上下左右周りからの距離を40px空ける
m40-t・・・上のブロックとの距離を40px空ける
m40-r・・・右のブロックとの距離を40px空ける
m40-b・・・下のブロックとの距離を40px空ける
m40-l・・・左のブロックとの距離を40px空ける

m50・・・上下左右周りからの距離を50px空ける
m50-t・・・上のブロックとの距離を50px空ける
m50-r・・・右のブロックとの距離を50px空ける
m50-b・・・下のブロックとの距離を50px空ける
m50-l・・・左のブロックとの距離を50px空ける

m60・・・上下左右周りからの距離を60px空ける
m60-t・・・上のブロックとの距離を60px空ける
m60-r・・・右のブロックとの距離を60px空ける
m60-b・・・下のブロックとの距離を60px空ける
m60-l・・・左のブロックとの距離を60px空ける

m70・・・上下左右周りからの距離を70px空ける
m70-t・・・上のブロックとの距離を70px空ける
m70-r・・・右のブロックとの距離を70px空ける
m70-b・・・下のブロックとの距離を70px空ける
m70-l・・・左のブロックとの距離を70px空ける

m80・・・上下左右周りからの距離を80px空ける
m80-t・・・上のブロックとの距離を80px空ける
m80-r・・・右のブロックとの距離を80px空ける
m80-b・・・下のブロックとの距離を80px空ける
m80-l・・・左のブロックとの距離を80px空ける

m90・・・上下左右周りからの距離を90px空ける
m90-t・・・上のブロックとの距離を90px空ける
m90-r・・・右のブロックとの距離を90px空ける
m90-b・・・下のブロックとの距離を90px空ける
m90-l・・・左のブロックとの距離を90px空ける

m100・・・上下左右周りからの距離を100px空ける
m100-t・・・上のブロックとの距離を100px空ける
m100-r・・・右のブロックとの距離を100px空ける
m100-b・・・下のブロックとの距離を100px空ける
m100-l・・・左のブロックとの距離を100px空ける