Learn Basic CSS by Building a Cafe Menu - Step 40

HTML-CSS
1

Tell us what’s happening:

This step basically said that keeping the <p> elements in 2 separate lines creates an additional space between them (makes sense). My question is: doesn’t HTML ignore whitespaces outside of the tags or something like that? What exactly is happening here? Is it something I should just ‘remember’?
TIA :slight_smile:

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: 50%;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 40

1 Like
2

In HTML, any whitespace (spaces, tabs, line breaks) between inline-block elements in the code gets rendered as a single space in the layout. This space affects the positioning of the elements when they are displayed inline-block.

3 Likes
3

Hello @ayushpandeyv172050 Hope you’re Fine! I really like the way you formulate your issue! :clap: :clap:
Normally HTML doesn’t consider whitespaces ouside of the tags tyou’re right! But in this case don’t forget that the p tag elements are inline block and the .flavor has a particular width. Even the .price too. An inline display element, as the name suggests, is rendered inline within the text or content flow of a document. It does not start on a new line and only takes up as much horizontal space as necessary to accommodate its content.

That is why there is an impact when your remove the space between the two elements!

I don’t know if i was really helpful but I hope I was! Happy coding! :+1:

2 Likes
5

Thanks a lot! I just tried not to waste the time of people who were going to help me. Hope it was somewhat effective :slight_smile:

Also, it does make more sense if you point out the inline-block element part. I was focusing on the p element part and that’s why didn’t really understand. It’s clearer now. Again, thank you for your time :slight_smile:

1 Like
6

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