Добавить внутреннюю разметку в 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>

примечание: большая часть этого материала взята из этого результата Google , я только адаптировал его к 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 -->

Хорошо, я немного упростила (там есть небольшое изображение и немного текста

), но дело в том, что я хотел бы добавить немного пространства между столбцами. Вот как это выглядит сейчас: Колонны И Космос http://i44.tinypic.com/4pxfkp.jpg Есть ли у вас какие-либо идеи относительно свойства CSS, к которому я должен прикоснуться? примечание: Если я добавлю поля или отступы, один столбец сместится вниз, потому что (насколько я понимаю) он не подходит. Могут быть и другие CSS, так как это входит в шаблон (меня попросили об этом изменении, но я не делал ничего, как обычно). Спасибо за понимание.

Answer 1

Вам нужно добавить отступы к столбцам. Но когда вы делаете это, вам также необходимо вычесть ту же сумму из свойства width. Это из-за коробчатой ​​модели .

.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;