Hi. Thanks for replying. I’m a bit confused about something.
Let me explain
In the block of code above there are two p elements but the second one has a span element around some part of it’s content.
The issue now is that after styling the p with the style below
p {
display: flex;
justify-content: space-between;
}
only the p element with the span tag got affected by this tag.
Why is this so?
I don’t know how familiar you are with CSS flex (or grid for that matter) but applying display: flex to an element turns it into a flex container. This means that you can control the layout of its child elements (i.e. any elements which are nested inside the flex container) using flex properties.
The second <p> element has a span, so the space-between justification makes the items inside the <p> fill the width of the container, putting the available space between the items (i.e. the text ‘Serving size’ and the <span> element).
The first <p> element has no child elements, only text content. So flex properties have nothing to put space-between.
I’ve been finding an answer to this for a while now, but you just explained it the best way! Thank you so much.
By the way, I’m new to css so i didn’t know that’s how flexbox works