[翻译]寻找圣杯 In Search of the Holy Grail（4）

Padding, please

我不是设计师，但是上面的布局实在是触犯了我的审美观。没有边距的栏目是很分辨和阅读的，我们需要空隙！

使用One True Layout这样百分比布局的的弊端之一就是会造成中间层的padding困难，百分比的padding在某些分辨率下会变的很难看。可以用固定宽度的padding，但是需要给每一栏内部嵌套一个div。

用这个布局padding不是问题，他可以直接给左、右边栏添加padding，只需响应的调整即可。例如我们要给上面的例子添加10px的padding，并且保持他（width+padding）还是200px，只需要小小的改动

#left { 
  width: 180px;        /* LC fullwidth - padding */ 
  padding: 0 10px; 
  right: 200px;        /* LC fullwidth */ 
  margin-left: -100％; 
}

要给中心层加padding需要一个技巧，但是不需要额外的结构，只需额外的一小段css。加的100％的宽度导致中心层和外部的的padding以外（non-padded width）的宽度一样宽。为了达到我们想要的效果，我们需要增加右边的margin，使其等于padding值的总和，这样就保证了他会是我们想要的大小。

我们改变了中间层的改变成现在这样后，左边栏需要移动更多的距离才能在正确的位置上，这也是技巧所在。我们需要给右边框的抵消值（上面的right值）增加上中间层的padding值。
为了更具体的说明，我继续以上面的例子为例，现在给每一个边框增加10px的padding值（合计20px），中间层增加20px的padding值（合计40px），新的样式如下：

body { 
  min-width: 630px;      /* 2x (LC fullwidth + 
                            CC padding) + RC fullwidth */ 
} 
#container { 
  padding-left: 200px;   /* LC fullwidth */ 
  padding-right: 190px;  /* RC fullwidth + CC padding */ 
} 
#container .column { 
  position: relative; 
  float: left; 
} 
#center { 
  padding: 10px 20px;    /* CC padding */ 
  width: 100％; 
} 
#left { 
  width: 180px;          /* LC width */ 
  padding: 0 10px;       /* LC padding */ 
  right: 240px;          /* LC fullwidth + CC padding */ 
  margin-left: -100％; 
} 
#right { 
  width: 130px;          /* RC width */ 
  padding: 0 10px;       /* RC padding */ 
  margin-right: -190px;  /* RC fullwidth + CC padding */ 
} 
#footer { 
  clear: both; 
} 
  
/*** IE Fix ***/ 
* html #left { 
  left: 150px;           /* RC fullwidth */ 
}

当然上下的padding值能很方便的添加，具体请参看nicely padded version 中的例子
这个布局也能在em下很好的工作，但是不能在混合em和px的时候工作，选什么你来定，但是要选的正确。