Bootstrap 4 how to add margin to element inside a col?

Question

I have some span elements inside a col:

<div class="container-fluid">
  <div class="row">
    <div class="col">
        <span class="myClass">some text</span>
        <span class="myClass">some text</span>
    </div>
    <div class="col"></div>
  </div>
</div>

myClass elements have some padding:

.myClass{
  background: #ecedea;
  padding: 10px 10px;
  margin-right: 20px;
}

Because there is multiple span elements in the first col, a new line is being created. My problem is because of the padding I have some overlay between my spans in the first line and my spans in the second line:

I tried to add some margin-top to myClass but it didn't help

Answer 1

span doesn't have margin because it's an inline element.

You can fix the CSS like this:

.myClass{
  background: #ecedea;
  padding: 10px 10px;
  display: inline-block;
  margin-right: 20px;
}

OR, you can use Bootstrap 4 utility classes and avoid the extra CSS:

<div class="container-fluid">
  <div class="row">
    <div class="col">
        <span class="bg-light d-inline-block p-2 mr-3">some text</span>
        <span class="bg-light d-inline-block p-2 mr-3">some text</span>
    </div>
  </div>
</div>

Demo: https://www.codeply.com/go/jKCFqBb92J