CSS new-line/line-break spacing

Question

Consider the following HTML

<div class="buttons">
    <button>Left</button>
    <button>Middle</button>
    <button>Right</button>
</div>

I can see spacing between buttons, which I understand is due to the CR/LF between each button markup.

Is there a way to correct this with CSS?

Answer 1

Yes, there are 2 ways:

First Way:

Set the html markup side by side

<div class="buttons">
    <button>Left</button><button>Middle</button><button>Right</button>
</div>

Second Way

Set float:left in the buttons

button{
float:left;
display: inline-block;
}