HTML source newlike makes space between objects - how to get rid of this?

Question

I have code like this:

<button>B1</button>
<button>B2</button>
<button>B3</button>

After some styling and removing all paddings and margins it produces output like this:

I know, that browser renders spaces where I have newlines in HTML code.

My question is:

Do I have to make my code less readable like this to get rid of these spaces?

<button>B1</button><button>B2</button><button>B3</button>

I'm using HTML5 and CSS3.

Answer 1

You can wrap your buttons inside a div and give that div a font-size of 0 to remove the space between the buttons.

.btn-group {
  font-size: 0;
}

<div class="btn-group">
  <button>B1</button>
  <button>B2</button>
  <button>B3</button>
</div>