Where does the spacing in Bootstrap button examples come from?-CodePudding

In the Bootstrap 5 button examples, there is a space between the buttons. I'am not sure where this space is defined and don't find any margin in the devtools:

Devtools Screenshot

Where does this space come from?

Edit1

In my example (using tailwind) the space is missing despite of using inline-block. Is there a way to manipulate the spacing, or am I missing something.

Devtools Screenshot of my inline-block buttons

Reproduced example:

https://codepen.io/jjoharrer/pen/ZEyQWyo

CodePudding user response：

As you can see in the bootstrap example are all input instead of one button, if you just copy another button without that will be like your example. You need to re-create margin class like bootstrap:

.button {
  background-color: green;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css">
<div>
  <div>
    <button id="" class="button no-underline text-center rounded inline-block active button-primary py-1 px-2 mr-2">Primary</button>
    <!--v-if--><button id="" class="button no-underline text-center rounded inline-block active button-secondary py-1 px-2 mr-2">Secondary</button>
    <!--v-if--><button id="" class="button no-underline text-center rounded inline-block active button-info py-1 px-2 mr-2">Info</button>
    <!--v-if--><button id="" class="button no-underline text-center rounded inline-block active button-success py-1 px-2 mr-2">Success</button>
    <!--v-if--><button id="" class="button no-underline text-center rounded inline-block active button-warning py-1 px-2 mr-2">Warning</button>
    <!--v-if--><button id="" class="button no-underline text-center rounded inline-block active button-danger py-1 px-2 mr-2">Danger</button>
    <!--v-if-->
  </div>
</div>

in this case i use mr-2 (margin right 2)

As you can see here if you go down (hit enter) with the code all work as expect so button will have a space else will be without space

.button {
  background-color: green;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css">
<div>
  <div>
    <button class="button no-underline text-center rounded inline-block active button-primary py-1 px-2 ">Primary</button>
    <button class="button no-underline text-center rounded inline-block active button-primary py-1 px-2 ">Primary</button>
    <button class="button no-underline text-center rounded inline-block active button-primary py-1 px-2 ">Primary</button><button class="button no-underline text-center rounded inline-block active button-primary py-1 px-2 ">Primary</button>
  </div>
</div>