An element on the same line without creating space between CSS buttons

Question

Can anyone explain this weird behavior why the extra spacing is added between the buttons.

Business -

Below is the HTML code that adds extra space between the buttons if it is written like this:

<div class="wrapper">
        <button class="btn one">First long button with a long text length</button>
        <button class="btn two">Second long button with a long text length</button>
    </div>

Conclusion -

BUT, if I write like this, then there will be no space -

The code -

<div class="wrapper">
        <button class="btn one">First long button with a long text length</button><button class="btn two">Second long button with a long text length</button>
    </div>

Conclusion -

CSS Code -

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  padding: 10px;
}

.btn {
  font-size: 14px;
  line-height: 28px;
  background: #FFFFFF;
  border: 1px solid #C3C3C3;
  position: relative;
  padding: 10px;
  display: inline;
}

.btn:before {
  content: "";
  position: absolute;
  width: 4%;
  height: 5px;
  background: #FFF;
  right: 0px;
  top: -5px;
}

.two {
  display: inline;
}

Answer 1

With inline elements, line breaks (and multiple spaces) are converted to 1 space.

Answer 2

, , ; html .

, " ", , , .

.: CSS
HTML , ; HTML (, PHP) minify . "" , "" , "" () ""; "" "".

"pre-processor", : html-

CSS , .
"block-type" "view-port" , ; , inline , CSS : display:inline-block, 100%, .

HTML.: .: ,

<button>one</button><!--
--><button>two</button>

<button>one</button
><button>one</button>

CSS.: ,
font-size:0px, CSS. / - :

body{font-size:0px;}
p,b,i,a,span{font-size:16px;}
div,svg{position:relative; box-sizing:border-box; margin:0px;}

Answer 3

\ n is a legal character in html, it just does not return a string. You can solve this problem by adding a font size: 0 to the buttons container, for example, buttons have a font size: 14px.

div.wrapper { font-size:0 ; }

Just be careful with other elements in your wrapper that will depend on your font size: 0. OR: you can write in one line ... :)