將內部添加到4列CSS

Question

我不是CSS專家（主要是因爲我最近沒有必要使用很多HTML/CSS的東西），所以我想出了以下樣式/ div來創建4列布局：

<style type="text/css"> 
     <!-- 
     .columns:after { 
      content: "."; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden; 
     } 
     * html .columns {height: 1%;} 
     .columns{ display:inline-block; } 
     .columns{ display:block; } 
     .columns .column{ 
      float:left; 
      overflow:hidden; 
      display:inline; 
     } 
     .columns .last{ float:right; } 

     .col4 .first{ left: auto;width:25%; } 
     .col4 .second{ left: auto;width:25%; } 
     .col4 .third{ left: auto;width:25%; } 
     .col4 .last{ left: auto;width:25%; } 
     --> 
    </style> 

注：大多數的這些東西來自this google result，我只是把它適應於4列。

然後，HTML看起來像這樣：

<div class="columns col4"> 
<div class="column first」> SOME TEXT </div><!-- /.first -—> 
<div class="column second」> MORE TEXT</div><!—- /.second -—> 
<div class="column third」> SOME MORE TEXT </div><!—- /.third --> 
<div class="column last」> SOME LAST TEXT </div><!-- /.last -—> 
</div><!-- /.columns --> 

好吧，我已經簡化這一點（有一個小的圖像和一些< H2>文本中有太多），但事情是，我d喜歡在列之間添加一些空格。下面是它現在的樣子： Columns And Space http://i44.tinypic.com/4pxfkp.jpg

您知道我應該觸摸哪些CSS屬性嗎？

備註：如果我添加邊距或填充，一列向下移動，因爲（據我瞭解）它不適合。也可能有其他的CSS，因爲它出現在一個模板中（我已經被要求做這個改變，但是我沒有像往常那樣做這些）。

感謝您的任何見解。

Answer 1

您需要填充添加到列。但是當你這樣做時，你還需要從width屬性中減去相同的金額。這是因爲我的box-model。

.col4 .first{ left: auto;width:24%; padding-right:1% } 
.col4 .second{ left: auto;width:24%; padding-right:1% } 
.col4 .third{ left: auto;width:24%; padding-right:1% } 
.col4 .last{ left: auto;width:24%; padding-right:1% } 

Answer 2

內緣=填充

Answer 3

http://www.w3schools.com/css/css_padding.asp

padding-top:25px; 
padding-bottom:25px; 
padding-right:50px; 
padding-left:50px;