Why do we place the two <p> elements on the same line in HTML when we could use an inline class selector?

HTML-CSS
1

In this step, we place 2 p elements on the same line.
Since p is block-level element, is it not more effective to use inline class selectors?
How does the inline-block property applied to (.item and .p) factor into all of this, if it does at all? Am i missing something?
Thanks in advance!

<!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 class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <article class="item">
            <p></p></p>
          </article>
        </section>
      </main>
    </div>
  </body>
</html>

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

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

Hi, first of all the p element is Not a block level element, it an inline element which means if the next element is inline it will fall beside it

The .item p selector helps you to style the p tags that are inside the article tag which are classed as item

I hope you understand
You can ask for further help

1 Like
3

@Funshyaj No, you are not correct. p elements are definitely block elements.

@fotunato The point of the challenge is to show you how you can change the default display style of an element like a p element to make it like an inline element.

1 Like
4

My apologies @RandellDawson, I must have been mistaken
You are correct

5

I see. That makes sense.

While I understand that these FCC learning steps can appear to be incomplete till the end, is it syntactically correct (outside these steps) to place any 2 p elements side-by-side only in the HTML code? Does that change anything?

Appreciate your reply!

6

p elements often are placed one after the other in HTML. For example, if you had a section with several paragraphs:

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

Placing them “side-by-side” or “one below the other” is the same thing. Normally, there is a lot of content in a p element so you wouldn’t literally place them “side-by-side” (on the same line) in the HTML document, but you could, and it would make no difference.