Spaces between bootstrap labels get removed when created on click

Question

When i click on my button create it creates a new bootstrap label each time.

But when it does there is no gap as you can see in the image below the labels are bunched up.

Question How can I make it so when I click my create button the labels will have the space between them. jQuery seems to remove the space.

CODEPEN DEMO

$(document).on("click", "#tag", function(event) {
  $('.label-container').append('<div class="label label-default">Default</div>');
});

HTML

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="label-container"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <button type="button" id="tag" class="btn btn-default">Create</button>
    </div>
  </div>
</div>

Answer 1

Just add a margin to your labels.

In your CSS:

.label {
  margin: 2px;
}

Answer 2

What you are looking for that is missing is that inline-block will generally render a gap for whitespace between inline-block elements-- for instance, if you create those elements in markup with lines between them, it will include a small gap. However, the append method adds no whitespace, and as such the elements are directly adjacent.

While I agree with amallard's solution of handling this with CSS, if you really want to recreate the affect of how it looks when written into HTML, you could simply include a small amount of whitespace (like a single space) in your append:

$(document).on("click", "#tag", function(event) {
  $('.label-container').append('<div class="label label-default">Default</div> ');
});