Как добавить отступ между столбцами в сетке Foundation Float?

Question

Я использую среду Foundation 6, пытаясь создать небольшое количество отступов между столбцами, однако я не могу найти решение, где я ошибаюсь?

Вот изображение, объясняющее, что у меня есть и чего я пытаюсь достичь

   <div class="row">
        <div class="column large-4 small-12">
            <P>Text1</P>
        </div>

        <div class="column large-4 small-12">
            <p>Text2</p>
        </div>

        <div class="column large-4 small-12">
            <p>Text3</p>
        </div>
    </div>


.column, .columns {
    border:red 1px solid;
    background-color:@menu-color;
    padding:5px;
}

Answer 1

Я не слишком знаком с Zurb Foundation, но вижу, что они используют Flexbox. Я также изменил предоставленный вами код для использования Flexbox, хотя он предназначен только для макета. Мы просто нацеливаемся на элемент среднего ряда и предоставляем ему левое и правое поле.

.column,
.columns {
  border: red 1px solid;
  padding: 5px;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
   flex: 1;
}

.column:nth-child(even) {
  margin-left: 10px;
  margin-right: 10px;
}

<div class="row">
  <div class="column large-4 small-12">
    <P>Text1</P>
  </div>

  <div class="column large-4 small-12">
    <p>Text2</p>
  </div>

  <div class="column large-4 small-12">
    <p>Text3</p>
  </div>
</div>

http://jsfiddle.net/ncL9wjbv/

Answer 2

Попробуйте добавить поле к CSS вместо заполнения.

.column, .columns {
    border:red 1px solid;
    background-color:@menu-color;
    margin:5px;
}