Learn Basic CSS by Building a Cafe Menu - Step 40

HTML-CSS
1

Hello! I was on step 40 of building the Camper Cafe Menu. The instructions say to remove the space between the 2 p elements so then you can change the margin in the CSS to 50% on each side, but I was wondering why that matters. I was under the assumption that spaces in the code did not affect how it displayed unless it was in between 2 tags as text.
For example: if I had a p element followed by a radio button, and put the text "French Vanilla " between the 2, the space after “Vanilla” would show up as a space before the radio button, but if I have just 2 p elements, I don’t see how the space between the 2 p tags would affect the margins. Thank you for reading!
Your code so far

<!-- file: index.html -->
<!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">

<!-- User Editable Region -->

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

<!-- User Editable Region -->

          </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>

/* file: styles.css */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

.item p {
  display: inline-block;
}

.flavor {
  text-align: left;
  width: 49%;
}

.price {
  text-align: right;
  width: 49%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Learn Basic CSS by Building a Cafe Menu - Step 40

Link to the challenge:

2

Try adding/removing a space between the two p elements and watch the preview pane to see what happens. It’s not a huge difference, but it is there.

Does this space actually make a difference in the long run? Does it really matter if the p elements are on the same line? It kind of does for the method this is using to align these elements. In the “real world” you would probably use flexbox or grid to align them and then the spaces wouldn’t matter. But since this is only the second course in the certification those methods aren’t available yet and so the spaces matter.

3 Likes
3

Thanks so much for the response. I do see a small difference when I remove the spaces between the two p elements, but why does that affect the html? Like if this space affects the p elements, then what else affects other elements? I thought only text displayed in between tags would be read and displayed on a webpage. I didn’t realize that text outside of elements could affect the code.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.