Learn Basic CSS by Building a Cafe Menu - Step 40

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

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

Link to the challenge:

2

You need to have the two p elements on the same line so they sit next to each other.

<p>Bla bla</p><p>Some number</p>
1 Like
3

In HTML, white spaces, including line breaks and spaces between elements, are generally not significant when it comes to rendering the content. Therefore, these two snippets are functionally equivalent. However, they may appear differently when formatting the HTML code for readability.

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

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

While both versions produce the same result when rendered in a web browser, the first version is typically preferred because it’s more readable and easier to maintain. It follows common coding conventions that make it easier for developers to understand and modify the code when necessary.

1 Like
4

@Oritorichie2 They are set to display inline-block.

.item p {
  display: inline-block;
}
5

Regardless it does not have to affect anything since HTML does not read white spaces its still a common coding convention to write your code properly

In HTML, white spaces, including line breaks and spaces between elements, are generally not significant when it comes to rendering the content. Therefore, these two snippets are functionally equivalent. However, they may appear differently when formatting the HTML code for readability.

this is not allowed
<p class="flavor">French Vanilla</p><p class="price">3.00</p>

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

even if we use the display:inline-block
.item p { display: inline-block; }

So, it doesn’t significantly affect the appearance or functionality of your content whether you have line breaks between the <p> elements (as in the first example) or not (as in the second example).

6

The space between the elements (be it a space or a new line) does have an effect on inline-block elements. Not much, but it is there. You can see the difference if you try it.

It is for the same reason back in the days when inline-block was used for layout we had to remove the whitespace to get the correct layout.

Edit:

I’m OK with explaining this but. At the end of the day, this is the challenge requirement. So we might just be confusing the camper with this.

I think it is worth knowing about. It is for the same reason we often set images to be display: block to avoid the white space they otherwise have.

7

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