Bootstrap 4 buttons example: where does the space between buttons is coming from? [duplicate]

Question

I have tried to inspect a "Buttons" example from Bootstrap 4. They have a nice-looking row of buttons, like this:

http://getbootstrap.com/docs/4.0/components/buttons/

But I don't understand, where does the space between buttons is coming from.

This is not margin, not flex-box aligning, not a transparent border. So, how it works? Actually, I disabled all the styles in dev-tools, but that space did not disappear.

Answer 1

The space is there because there's whitespace between the HTML elements. If you remove the whitespace, the buttons will be positioned next to each other.

Note that whitespace (newline) between the elements is condensed to a single space by the browser.

<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button>

Now if we remove the whitespace:

<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button>