rendundant spacing between bootstrap buttons-CodePudding

I have two buttons side by side and for some reason, I have some spacing between them, it's spacing that I can't inspect.

this is the spacing: image

<div>
       <button h  style="background: #C8CED7;">
                        Cancel
                    </button>
       <button    style="background: #C8CED7;">SEND</button>
</div>

jsfiddle example: link

CodePudding user response：

It's because you put each button in a new line. It has nothing to do with font size as @Naren suggested.

Each button in a new line:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div>
  <div  style="background: #C8CED7;">Cancel</div>
  <div  style="background: #C8CED7;">SEND</div>
</div>

Buttons next to each other:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div>
  <div  style="background: #C8CED7;">Cancel</div><div  style="background: #C8CED7;">SEND</div>
</div>

CodePudding user response：

Setting display to flex removes the space!

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >
  <button h  style="background: #C8CED7;">
    Cancel
  </button>
  <button  style="background: #C8CED7;">SEND</button>
</div>