如何处理上下margin

如何处理上下margin

     对于模块来说，其上下margin不确定，因为美术设计的需求不同，可能同样样式的模块，在不同位置上有不同的上下margin。如图1所示。

 

图1

 

    图2中用线框出的部分有相同的样式、字号、颜色，且都有下划线。很明显，我们可以将它提取成一个通用的组件。如代码清单1所示。

图2

 代码清单1     提取标题组件

 

<style type="text/CSS">
.title{border-bottom:1px dashed #B2BCC6;color:#0066CF;font- size: 16px; font-weight:bold;)
</style>
<h2 class="title">服务理念</h2>
<h2 class="title">服务宗旨</h2>
<h2 class="title">产品的优势</h2>

    这些样式相同的模块还有上下margin，我们应该如何设置它们的上下margin呢？提取组件时，需要将上下margin也包含进来吗？

 

 

    需要按图3所示重新提取组件吗？可是这三个模块的margin-top并不相同，如图4所示。

 

图3

 

图4 

 

 

 如果组件需包含margin值，那么其代码如代码清单2所示。

<style type="text/CSS">
 .titlel{
     border-bottom:1px dashed #B2BCC6;color:#0066CF;font-size:16px;
     font-weight :bold;margin-top: 20px; }
 .title2{
      border-bottom:1px dashed #B2BCC6;color:#0066CF;font-size:16px;
      font-weight :bold;margin-top: 60px; }
</style>
<h2 class="title1">服务理念</h2 >
           ...
<h2 class="titlel">服务宗旨</h2>
           ...
<h2 class="title2">产品优势</h2>

 

 

    如果又出现一个新的设计，需要改变margin-top值，我们需要再定义title3和title4 吗？包含margin这个不稳定样式到组件里，大大限制了类的重用性！如果再多设计几个margin值不同的模块，很容易产生类数量的人爆炸。这就是我们上节讲到过的“多用组合，少用继承”，解决这个问题的方法就是将类中不稳定的部分分离出来，单独设置成一个类，将相对稳定的剩下的那部分设置成另一个类，通过类的组合——挂多个class实现最终样式。 模块的上下margin是类的组合的一个典型应用。应用类的组合如代码清单3所示。

 

 

    代码清单3    应用类的组合   

<style type="text/CSS">
 .mt20{margin-top:20px;)
 .mt60(margin-top:60px;}
 .title{border-bottom:1px dashed #B2BCC6;color:#0066CF;font-size:16px; font-weight:bold;}
</style>
<h2 class="title mt20">服务理念</h2>
    ...
<h2 class="title mt20">服务宗旨</h2>
        ...
<h2 class="title mt60">产品优势</h2>
      ...

 

 

 

    除了给图中所示模块挂上margin-top的类，其实也可以给别的模块挂卜margin-bottom的类，如图5所示。

 图5

 

 

 

 

还有些工程师会采取如图6所示的添加方法。

 

图6
 

 

 

    图6混用了margin-top和margin-bottom，但事实上，这种做法会带来意外的效果——上下margin重合问题。margin是个有点特殊的样式，相邻的margin-left和margin-right是不会重合的，但相邻的margin-top和margin-bottom会产生重合。图6的真实效果如图7所示。

 图7

 

    如果对相邻的模块同时使用了margin-top和margin-bottom，边距会重合带来不必要的麻烦，所以最好统一使用margin-top或者margin-bottom，不要混合使用，从而降低出现问题的风险。这并不是技术上必需的，但却是一个良好的习惯。

 

 

 

    总结：如果不确定模块的上下margin特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用于边距的原子类（例如mr10、mb20）。模块最好不要混用margin-top和margin-bottom，统一使用margin-top或margin-bottom。