Aprende CSS básico construyendo un menú de cafetería - Paso 40

HTML-CSS
1

Cuéntanos qué está pasando:

Entiendo lo que hay que hacer (ya completé el curso incluso), pero me quedó la duda en este paso. Por qué funciona poner los dos <p> en la misma línea? Qué es lo que cambia? Si alguien me puede explicar lo agradezco mucho!

I understand what I have to do (I even completed the course already), but I didn’t understand how this step works. Why does including the two <p> elements in the same line affect the way they’re displayed? Thanks for any help!

Tu código hasta el momento

<!-- 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%;
}

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 OPR/114.0.0.0

Información del Desafío:

Aprende CSS básico construyendo un menú de cafetería - Paso 40

2

Hi there!

Remove space between the first paragraph closing tag and second paragraph opening tag.

3

Thanks! I understand this, but I want to know how come changing the line the <p> element is written on changes the display of it

4

You’re welcome. The reason the display changes is because HTML treats whitespace (including spaces, tabs, and newlines) between inline elements or text nodes as actual spaces in the rendered page. For block elements like

, the whitespace between them doesn’t affect the layout because each

is displayed on its own line by default.

However, if you’re styling the

elements in a way that makes them behave as inline or inline-block elements (e.g., using display: inline or inline-block in CSS), the whitespace (like a newline) is treated as an actual space between those elements. This is why you see a visual difference based on where the tags are placed.

1 Like