Zurb Foundation Margin between Columns

Question

I have a very simple code with Foundation CSS

<div class="row">
    <div class="large-offset-1 large-6 columns">Content goes here</div>
    <div class="large-4 end columns">Side goes here</div>
</div>

I want there to be margins between the columns. Currently, there is only padding. So if I add background-color to these columns, then they stick to each other.

Doesn't Foundation provide a solution for this?

Answer 1

You could try this:

<div class="row">
  <div class="large-offset-1 large-6 columns padded-column">
    <div class="column-content">Content goes here.</div>
  </div>
  <div class="large-4 end columns padded-column">
    <div class="column-content">Side goes here</div>
  </div>
</div>

Then, for styles:

.padded-column {
  padding: 10px;
}
.column-content {
  background: red;
}

Answer 2

try this (it makes a full width div inside the other, automatically adding margins)

<div class="large-4 medium-6 small-12 columns">
    <div class="large-24 columns">
        ... content ...
    </div>
</div>

Answer 3

I had a similar issue that couldn't be resolved with padding. Since Foundation 5 isn't IE8 compatible, I just used calc eg. width: calc(50% - 10px);