ブロック要素余白用セレクタ
パディング(内余白): pd0px～pd100px
30ピクセル(pd30px)以降は「5ピクセル」単位で指定してください。
表示例
上下左右に10ピクセルの内余白が入ります。
上下左右に15ピクセルの内余白が入ります。
上下左右に24ピクセルの内余白が入ります。
上下左右に30ピクセルの内余白が入ります。
上下左右に40ピクセルの内余白が入ります。
上下左右に55ピクセルの内余白が入ります。
このコード
<div class="pd10px">上下左右に10ピクセルの内余白が入ります。</div> <div class="pd15px">上下左右に15ピクセルの内余白が入ります。</div> <div class="pd24px">上下左右に24ピクセルの内余白が入ります。</div> <div class="pd30px">上下左右に30ピクセルの内余白が入ります。</div> <div class="pd40px">上下左右に40ピクセルの内余白が入ります。</div> <div class="pd55px">上下左右に55ピクセルの内余白が入ります。</div>
上パディング(内余白): pd0px-top～pd100px-top
30ピクセル(pd30px-top)以降は「5ピクセル」単位で指定してください。
表示例
上に10ピクセルの内余白が入ります。
上に15ピクセルの内余白が入ります。
上に24ピクセルの内余白が入ります。
上に30ピクセルの内余白が入ります。
上に40ピクセルの内余白が入ります。
上に55ピクセルの内余白が入ります。
このコード
<div class="pd10px-top">上に10ピクセルの内余白が入ります。</div>
<div class="pd15px-top">上に15ピクセルの内余白が入ります。</div>
<div class="pd24px-top">上に24ピクセルの内余白が入ります。</div>
<div class="pd30px-top">上に30ピクセルの内余白が入ります。</div>
<div class="pd40px-top">上に40ピクセルの内余白が入ります。</div>
<div class="pd55px-top">上に55ピクセルの内余白が入ります。</div>
下パディング(内余白): pd0px-btm～pd100px-btm
30ピクセル(pd30px-btm)以降は「5ピクセル」単位で指定してください。
表示例
下に10ピクセルの内余白が入ります。
下に15ピクセルの内余白が入ります。
下に24ピクセルの内余白が入ります。
下に30ピクセルの内余白が入ります。
下に40ピクセルの内余白が入ります。
下に55ピクセルの内余白が入ります。
このコード
<div class="pd10px-btm">下に10ピクセルの内余白が入ります。</div>
<div class="pd15px-btm">下に15ピクセルの内余白が入ります。</div>
<div class="pd24px-btm">下に24ピクセルの内余白が入ります。</div>
<div class="pd30px-btm">下に30ピクセルの内余白が入ります。</div>
<div class="pd40px-btm">下に40ピクセルの内余白が入ります。</div>
<div class="pd55px-btm">下に55ピクセルの内余白が入ります。</div>
左パディング(内余白): pd0px-l～pd100px-l
30ピクセル(pd30px-l)以降は「5ピクセル」単位で指定してください。
表示例
左に10ピクセルの内余白が入ります。
左に15ピクセルの内余白が入ります。
左に24ピクセルの内余白が入ります。
左に30ピクセルの内余白が入ります。
左に40ピクセルの内余白が入ります。
左に55ピクセルの内余白が入ります。
このコード
<div class="pd10px-l">左に10ピクセルの内余白が入ります。</div>
<div class="pd15px-l">左に15ピクセルの内余白が入ります。</div>
<div class="pd24px-l">左に24ピクセルの内余白が入ります。</div>
<div class="pd30px-l">左に30ピクセルの内余白が入ります。</div>
<div class="pd40px-l">左に40ピクセルの内余白が入ります。</div>
<div class="pd55px-l">左に55ピクセルの内余白が入ります。</div>
右パディング(内余白): pd0px-r～pd100px-r
30ピクセル(pd30px-r)以降は「5ピクセル」単位で指定してください。
表示例
右に10ピクセルの内余白が入ります。
右に15ピクセルの内余白が入ります。
右に24ピクセルの内余白が入ります。
右に30ピクセルの内余白が入ります。
右に40ピクセルの内余白が入ります。
右に55ピクセルの内余白が入ります。
このコード
<div class="pd10px-r">右に10ピクセルの内余白が入ります。</div>
<div class="pd15px-r">右に15ピクセルの内余白が入ります。</div>
<div class="pd24px-r">右に24ピクセルの内余白が入ります。</div>
<div class="pd30px-r">右に30ピクセルの内余白が入ります。</div>
<div class="pd40px-r">右に40ピクセルの内余白が入ります。</div>
<div class="pd55px-r">右に55ピクセルの内余白が入ります。</div>
マージン(外余白): mg0px～mg100px
30ピクセル(mg30px)以降は「5ピクセル」単位で指定してください。
表示例
上下左右に10ピクセルの外余白が入ります。
上下左右に15ピクセルの外余白が入ります。
上下左右に24ピクセルの外余白が入ります。
上下左右に30ピクセルの外余白が入ります。
上下左右に40ピクセルの外余白が入ります。
上下左右に55ピクセルの外余白が入ります。
このコード
<div class="mg10px">上下左右に10ピクセルの外余白が入ります。</div>
<div class="mg15px">上下左右に15ピクセルの外余白が入ります。</div>
<div class="mg24px">上下左右に24ピクセルの外余白が入ります。</div>
<div class="mg30px">上下左右に30ピクセルの外余白が入ります。</div>
<div class="mg40px">上下左右に40ピクセルの外余白が入ります。</div>
<div class="mg55px">上下左右に55ピクセルの外余白が入ります。</div>
上マージン(外余白): mg0px-top～mg100px-top
30ピクセル(mg30px-top)以降は「5ピクセル」単位で指定してください。
表示例
上に10ピクセルの外余白が入ります。
上に15ピクセルの外余白が入ります。
上に24ピクセルの外余白が入ります。
上に30ピクセルの外余白が入ります。
上に40ピクセルの外余白が入ります。
上に55ピクセルの外余白が入ります。
このコード
<div class="mg10px-top">上に10ピクセルの外余白が入ります。</div>
<div class="mg15px-top">上に15ピクセルの外余白が入ります。</div>
<div class="mg24px-top">上に24ピクセルの外余白が入ります。</div>
<div class="mg30px-top">上に30ピクセルの外余白が入ります。</div>
<div class="mg40px-top">上に40ピクセルの外余白が入ります。</div>
<div class="mg55px-top">上に55ピクセルの外余白が入ります。</div>
下マージン(外余白): mg0px-btm～mg100px-btm
30ピクセル(mg30px-btm)以降は「5ピクセル」単位で指定してください。
表示例
下に10ピクセルの外余白が入ります。
下に15ピクセルの外余白が入ります。
下に24ピクセルの外余白が入ります。
下に30ピクセルの外余白が入ります。
下に40ピクセルの外余白が入ります。
下に55ピクセルの外余白が入ります。
このコード
<div class="mg10px-btm">下に10ピクセルの外余白が入ります。</div>
<div class="mg15px-btm">下に15ピクセルの外余白が入ります。</div>
<div class="mg24px-btm">下に24ピクセルの外余白が入ります。</div>
<div class="mg30px-btm">下に30ピクセルの外余白が入ります。</div>
<div class="mg40px-btm">下に40ピクセルの外余白が入ります。</div>
<div class="mg55px-btm">下に55ピクセルの外余白が入ります。</div>
左マージン(外余白): mg0px-l～mg100px-l
30ピクセル(mg30px-l)以降は「5ピクセル」単位で指定してください。
表示例
左に10ピクセルの外余白が入ります。
左に15ピクセルの外余白が入ります。
左に24ピクセルの外余白が入ります。
左に30ピクセルの外余白が入ります。
左に40ピクセルの外余白が入ります。
左に55ピクセルの外余白が入ります。
このコード
<div class="mg10px-l">左に10ピクセルの外余白が入ります。</div>
<div class="mg15px-l">左に15ピクセルの外余白が入ります。</div>
<div class="mg24px-l">左に24ピクセルの外余白が入ります。</div>
<div class="mg30px-l">左に30ピクセルの外余白が入ります。</div>
<div class="mg40px-l">左に40ピクセルの外余白が入ります。</div>
<div class="mg55px-l">左に55ピクセルの外余白が入ります。</div>
右マージン(外余白): mg0px-r～mg100px-r
30ピクセル(mg30px-r)以降は「5ピクセル」単位で指定してください。
表示例
右に10ピクセルの外余白が入ります。
右に15ピクセルの外余白が入ります。
右に24ピクセルの外余白が入ります。
右に30ピクセルの外余白が入ります。
右に40ピクセルの外余白が入ります。
右に55ピクセルの外余白が入ります。
このコード
<div class="mg10px-r">右に10ピクセルの外余白が入ります。</div>
<div class="mg15px-r">右に15ピクセルの外余白が入ります。</div>
<div class="mg24px-r">右に24ピクセルの外余白が入ります。</div>
<div class="mg30px-r">右に30ピクセルの外余白が入ります。</div>
<div class="mg40px-r">右に40ピクセルの外余白が入ります。</div>
<div class="mg55px-r">右に55ピクセルの外余白が入ります。</div>
テキスト／コンテンツ装飾定義一覧