女性向けサイト作りに圧倒的効果！

• 2014.10.6
• 隠された装飾機能

余白（マージン、パディング）を調整するクラス

未だにマージンとパディングの区別があいまいになる私ですが、余白を調整するクラスが用意されています。

画像をグリッド上に並べるときなんかに使うかもな、という感じ。

<div class="clearfix">
画像クラスにm20指定
<img src="http://tcd014an.sukkiris.com/wp-content/uploads/2014/10/021-e1412587036283.jpg" alt="021" width="150" height="133" class="m20 l-flo size-full wp-image-136" /><img src="http://tcd014an.sukkiris.com/wp-content/uploads/2014/10/021-e1412587036283.jpg" alt="021" width="150" height="133" class="m20 l-flo size-full wp-image-136" /><img src="http://tcd014an.sukkiris.com/wp-content/uploads/2014/10/021-e1412587036283.jpg" alt="021" width="150" height="133" class="m20 l-flo size-full wp-image-136" /></div>

<div class="clearfix">
画像クラスにm0指定
<img src="http://tcd014an.sukkiris.com/wp-content/uploads/2014/10/021-e1412587036283.jpg" alt="021" width="150" height="133" class="m0 l-flo size-full wp-image-136" /><img src="http://tcd014an.sukkiris.com/wp-content/uploads/2014/10/021-e1412587036283.jpg" alt="021" width="150" height="133" class="m0 l-flo size-full wp-image-136" /><img src="http://tcd014an.sukkiris.com/wp-content/uploads/2014/10/021-e1412587036283.jpg" alt="021" width="150" height="133" class="m0 l-flo size-full wp-image-136" />
</div>

指定方法はこんな感じ。
m0: マージン上下左右０
mt0: マージン上側０
mr0: マージン右側０
mb0: マージン下側０
ml0: マージン左側０

数字部分は、0~80まで5刻みで指定可。
（0,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80)

パディングも同じような感じ。
p0: パディング上下左右０
pt0: パディング上側０
pr0: パディング右側０
pb0: パディング下側０
pl0: パディング左側０

数字部分は0,5,10。

こんな感じです。

• Tweet
•