Margin & Padding 空隙

使用说明

空隙是指区块之间的上下左右间隔，本框架使用ax-margin，ax-padding表示空隙。

ax-margin，是指区块距离外边距，默认是14px。
ax-padding，是指区块距离内边距，默认是14px。

ax-margin

ax-margin是指区块的四周外边距，默认值是14px。

14px的外边距

                            <section class="demo-section-border ax-margin">14px的外边距</section>

ax-padding

ax-padding是指区块的四周内边距，默认值是14px。

14px的内边距

                            <section class="ax-padding" style="background-color: #ebebeb;line-height: 80px;text-align: center">
                                    <div style="background-color: #ccc;">14px的内边距</div>
                            </section>

尺寸

空隙类均支持尺寸，与ax-break和ax-gutter对比的数值如下：

尺寸	ax-break	ax-gutter	ax-margin/ax-padding
ax-xxs	4px	4px	4px
ax-xs	8px	8px	8px
ax-sm	10px	12px	10px
ax-md	14px	14px	14px
ax-lg	18px	16px	18px
ax-xl	22px	22px	22px
ax-xxl	28px	28px	28px

写法举例：<span class="ax-margin ax-sm"></span>

间隙方向

对于ax-margin和ax-padding可以使用间隙方向。

ax-margin-lr/ax-padding-lr：只是左右两侧有间隙；
ax-margin-tb/ax-padding-tb：只是上下两侧有间隙；
ax-margin-left/ax-padding-left：只是左侧有间隙；
ax-margin-right/ax-padding-right：只是右侧有间隙；
ax-margin-top/ax-padding-top：只是上方有间隙；
ax-margin-bottom/ax-padding-bottom：只是下方有间隙；

尺寸对方向间隙依然有效。写法举例：<span class="ax-margin-lr ax-sm"></span>