如何处理上下margin

如何处理上下margin

 

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

 

图1

 

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

图2

 

 代码清单1     提取标题组件

 

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

 

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

 

 

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

 

图3

 

图4 

 

 

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

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

 

 

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

 

 

    代码清单3    应用类的组合    

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

 

 

 

    除了给图中所示模块挂上 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。

转载于:https://www.cnblogs.com/csdttnk/archive/2013/01/06/2848395.html