Why does a space appear when I put p elements on the different lines in the editor whereas that space disappears when I put them next to each other?

Question

I made two p elements inline-block and I faced something like above. Can anyone explain why this happens?

.item p {
  display: inline-block;
}

<article class="item">
     <p>Caramel Macchiato</p><p>3.75</p>
</article>

When I put these two inline-block p elements on different lines, they look like the following: Caramel Macchiato 3.75 But When I put them next to each other on the same line, that space between two p elements disappear: Caramel Macchiato3.75