Coffee Menu - Different output on freecodecamp than in VS Code using the same code

Hi,

I have copied the same code from freecodecamp to VS Code and it looks different while running it on Live Server. Adding print screen. Does anybody know why is it happening please? The articles should put it into the same row but it does not work in VS Code.

I think you might have typed the prices and the flavors on different lines. The prices coming after the flavors may indicate that you typed them on separate lines.

Paragraphs are block elements, not inline

Thank you for helping me on this - That’s what I thought first but VS Code always separates the line into two after save. Freecodecamp module will do it as well but it keeps the flavor and price on the same line. VS Code doesn’t so there has to be something wrong.

 <article class="item">
          <p class="flavor">French Vanilla</p>
          <p class="price">3.00</p>
        </article>
1 Like

It is just the code formatter putting the HTML on separate lines, the fCC editor will do the same if you use its code formatter (F1 > format document).

If you replace all the p elements with span elements and update the selector, it should work the same and the code formatter will not add newlines.

I assume using p elements was done for semantic reasons but using p elements (effectively) as span elements is maybe not the right choice here. Sure, the span element is non-semantic (sort of the div of inline elements) but if you rely on inline-block elements and HTML whitespace for the layout, using p elements might not be correct.

It does highlight why you shouldn’t rely on inline-block elements and HTML whitespace for layout. It is an old and slightly unreliable way of doing layout.

1 Like