向4列css添加内部边距

我不是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>文本),但问题是我想在列之间添加一些空格。现在看起来是这样的: Columns And Space http://i44.tinypic.com/4pxfkp.jpg

你知道我应该使用什么css属性吗?

注: 如果我添加边距或填充,一列会向下移动,因为(据我所知)它不适合。可能还有其他css,因为这是一个模板(有人要求我做这个更改,但我没有像往常一样做任何更改)。

谢谢你的洞察力。