Curious on the 'why' here - Step 36 of "Design a Cafe Menu" in the CSS curriculum

Curriculum Help
,
1

Tell us what’s happening:

Hey there! :sparkles:

I’m relatively new to coding, currently working through the Front End Development Curriculum. Sorry if this is the wrong section to post!

I don’t have an issue with this lesson, it’s directions are clear and straightforward. Just trying to understand an underlying concept. Why does the text placement within the HTML side (specifically: directly inline with no spacing vs nested in the same element but on their own line) have an effect on how the CSS reads and displays?

Shared line:

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

vs. separate line:

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

Maybe my understanding is wrong, but I thought as long as the text in the text editor is in the same element, and are running in order, that it doesn’t matter how many spaces there are between them- it would display the same, right..?

Maybe I’m missing something obvious haha. Thanks for stopping by anyway!

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
    <div class="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article>
            <p>Caramel Macchiato</p>
            <p>3.75</p>
          </article>
          <article>
            <p>Pumpkin Spice</p>
            <p>3.50</p>
          </article>
          <article>
            <p>Hazelnut</p>
            <p>4.00</p>
          </article>
          <article>
            <p>Mocha</p>
            <p>4.50</p>
          </article>
        </section>
      </main>
    </div>
  </body>
</html>

Lesson URL (https://www.freecodecamp.org/learn/responsive-web-design-v9/workshop-cafe-menu/step-36)

2

Welcome to the forum @curious.sculptr

.item p {
  display: inline-block;
}

The .item p selector for the parent article element turns the paragraph elements into inline elements.

Removing the spaces decreases the white space between the two elements, which affects the display:

<p></p>...............<p></p>
<p></p><p></p>

Note that each paragraph is aligned differently.

Happy coding

3

Ohhhh I see, I was not considering that! I thought the white space for each element wouldn’t be effected by the spacing between them in the editor as well, this makes me want to dig deeper on how the computer is actually interpreting what it’s seeing.

Thank you for the reply Teller! :hugs: