0

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 class="btn btn-responsive margin-right-12" style="background: #C8CED7;">
                        Cancel
                    </button>
       <button  class="btn btn-responsive"  style="background: #C8CED7;">SEND</button>
</div>

jsfiddle example: link

Guy Cohen
  • 21
  • 4
  • Does this answer your question? [How to remove the space between inline/inline-block elements?](https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-inline-block-elements) – Andy Aug 08 '22 at 11:45

1 Answers1

1

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/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div>
  <div class="btn btn-responsive margin-right-12" style="background: #C8CED7;">Cancel</div>
  <div class="btn btn-responsive blue-marketlog" style="background: #C8CED7;">SEND</div>
</div>

Buttons next to each other:

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

<div>
  <div class="btn btn-responsive margin-right-12" style="background: #C8CED7;">Cancel</div><div class="btn btn-responsive blue-marketlog" style="background: #C8CED7;">SEND</div>
</div>
Rok Benko
  • 14,265
  • 2
  • 24
  • 49