ACE模板知识积累-CSS部分-1-.space

ace中有一类样式用来做垂直div之间的间隙

之前我在bootstrap框架中都会添加一个.mt10(margin-top:10px)

但ace显然比我的做法要高级得多，它定义了一套间隙样式：（取自ace.min.css美化后第686到922行）

.space {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0

}

.vspace-xs,.vspace-sm,.vspace-md,.vspace-lg {

max-height:1px;

min-height:1px;

overflow:hidden;

display:none;

margin:12px 0

}

.space-32 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:32px 0 31px

}

.vspace-32,.vspace-xs-32,.vspace-sm-32,.vspace-md-32,.vspace-lg-32 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:32px 0 31px 0

}

.space-30 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:30px 0 29px

}

.vspace-30,.vspace-xs-30,.vspace-sm-30,.vspace-md-30,.vspace-lg-30 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:30px 0 29px 0

}

.space-28 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:28px 0 27px

}

.vspace-28,.vspace-xs-28,.vspace-sm-28,.vspace-md-28,.vspace-lg-28 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:28px 0 27px 0

}

.space-26 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:26px 0 25px

}

.vspace-26,.vspace-xs-26,.vspace-sm-26,.vspace-md-26,.vspace-lg-26 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:26px 0 25px 0

}

.space-24 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:24px 0 23px

}

.vspace-24,.vspace-xs-24,.vspace-sm-24,.vspace-md-24,.vspace-lg-24 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:24px 0 23px 0

}

.space-22 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:22px 0 21px

}

.vspace-22,.vspace-xs-22,.vspace-sm-22,.vspace-md-22,.vspace-lg-22 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:22px 0 21px 0

}

.space-20 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:20px 0 19px

}

.vspace-20,.vspace-xs-20,.vspace-sm-20,.vspace-md-20,.vspace-lg-20 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:20px 0 19px 0

}

.space-18 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:18px 0 17px

}

.vspace-18,.vspace-xs-18,.vspace-sm-18,.vspace-md-18,.vspace-lg-18 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:18px 0 17px 0

}

.space-16 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:16px 0 15px

}

.vspace-16,.vspace-xs-16,.vspace-sm-16,.vspace-md-16,.vspace-lg-16 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:16px 0 15px 0

}

.space-14 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:14px 0 13px

}

.vspace-14,.vspace-xs-14,.vspace-sm-14,.vspace-md-14,.vspace-lg-14 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:14px 0 13px 0

}

.space-12 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:12px 0 11px

}

.vspace-12,.vspace-xs-12,.vspace-sm-12,.vspace-md-12,.vspace-lg-12 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:12px 0 11px 0

}

.space-10 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:10px 0 9px

}

.vspace-10,.vspace-xs-10,.vspace-sm-10,.vspace-md-10,.vspace-lg-10 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:10px 0 9px 0

}

.space-8 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:8px 0 7px

}

.vspace-8,.vspace-xs-8,.vspace-sm-8,.vspace-md-8,.vspace-lg-8 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:8px 0 7px 0

}

.space-6 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:6px 0 5px

}

.vspace-6,.vspace-xs-6,.vspace-sm-6,.vspace-md-6,.vspace-lg-6 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:6px 0 5px 0

}

.space-4 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:4px 0 3px

}

.vspace-4,.vspace-xs-4,.vspace-sm-4,.vspace-md-4,.vspace-lg-4 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:4px 0 3px 0

}

.space-2 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:2px 0 1px

}

.vspace-2,.vspace-xs-2,.vspace-sm-2,.vspace-md-2,.vspace-lg-2 {

max-height:1px;

min-height:1px;

overflow:hidden;

margin:12px 0;

margin:2px 0 1px 0

}

从2到32都有，可以说绝对满足人们的需要。

但不明白的是为什么都要先写个margin:12px 0,然后用另一个margin去覆盖？这样写的用意是什么？望有路过的大神给提点一下。

还有就是每个.space都有一套.vspace伴随，这又是为何？