How to set space between to p tag

I have a question about step 41 in CAFE MENU. I should set any space between two p elements IN this step, But I can’t set it. Please guide me.

2 Likes

Hi @Molhem !

Welcome to the forum!

Can you paste the link so we can see the challenge you are working on?

1 Like

I found the challenge you are working on.
In the future, please provide the challenge link.
That would help us out :grinning:

Here is your task
move the price p element to be on the same line and make sure there is no space between them.

They want you to edit the html portion they gave you which is this

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

They are currently on seperate lines.
Move the bottom <p> tag right next to the top one and the test will pass.

Move this

 <p class="price">3.00</p>

here

   <p class="flavor">French Vanilla</p> move here and make sure there are no spaces
8 Likes

Dear Jwilkons.oboe
Thanks for your attention. This is the link below that I challenge.
Step 41 Part of Caper Cafee
I try to set p elements beside each other with various width properties but the system gives a flowing error

Your p elements should not have any space between them.

I change width but I can pass this step

Dear jwilkins
many thanks. yes, I know what they want but I try to change various widths that give errors. I don’t where is the problem.

You are not supposed to change the widths.
That is why you are not passing.

You are misunderstanding the directions.

Here are the directions again
You could keep trying various percentages for the widths. Instead, simply move the price p element to be on the same line and make sure there is no space between them.

The directions say you could adjust the widths but don’t do that because you should edit the html instead.
That is where the confusion is.
You keep adjusting the width but you are not supposed to
You are don’t need to touch the css at all in this lesson.

Please reset it and only edit the html like I showed you and the test will pass.

Hope that is clear.

2 Likes

Dear jwilkins.oboe
many thanks for your help. that’s worked. exactly, I misunderstood I should move p elemnet. really many thanks
best wishes

1 Like

Hi,
Even i misunderstood this but it got cleared when i looked at your reply. I just want to know if there is any reason for removing the spacing between the p tags apart from code readability.

Try removing the width on .flavor and .price in the CSS. Now try it with and without a space between the p elements, can you see the difference?

1 Like

I have tried adding and removing the space (tab spaces, regular spaces and new lines) but didn’t find any difference. Below is the code i have checked with.

<p class=“flavor”>French Vanilla</p >

                                                      &lt;p class="price">3.00&lt;/p &gt;

Did you remove the width as I said to?

Spaces

1 Like

Yup! I have commented out the width properties. I read some where that the space between the html tags doesn’t actually matter because the browser ignores the whitespace. (I could be wrong. i think i have read this when i first started coding)

Sorry! I’m able to see the difference now. I didn’t realize this as i was more focused on the number of spaces I’m giving. Now i get it. Browser ignores the whitespace but converts it to single space which the challenge wanted us to remove. Thanks for your help! Appreciate it.

It’s just how inline-block elements behave.

Once upon a time, people made grids using inline-block and there you are to remove the spaces otherwise the elements won’t fit the grid. One method used was to add a comment block between the elements.

Finding this response of yours seven months after the fact, and it’s still helpful! Thanks so much!

Thank you! The code passed.

Hello, I have done that but still getting an error

Thank you the code has passed