I have a simple <p> element with text in it and halfway through the text I want to insert an image. For some reason the text that comes after the image isn’t styled according to the stylesheet:
p {
font-size: 20px;
}<p>
Text is styled according to the stylesheet.
<div></div>
Text loses its styling.
</p>Why is that?
>Solution :
Your Markup is invalid! Use a Markup Valdiator to check if your projects are validly coded.
The issue is, that paragraph (<p>) is a container solely for a text block where flow-text is expected. A div however is a block container and as such not a container for flow-text unlike a span.
Modern mainstream browsers have an auto-correction feature to fix most mistakes in the code to still render the document and not completely break itself.
Your code will be corrected by browsers like this:
<p>
Text is styled according to the stylesheet.
</p>
<div></div>
Text loses its styling.
As such you will realize why the second line is no longer influenced by the CSS styling.
Solution
You stated in the comments:
@ralph.m Yes, that’s beacause I want to add a description of the image under it.
And this point I have to say, that a div is not a suitable container either. The correct way is to use figure and figcaption.
<figure>
<img src="https://via.placeholder.com/200.jpg">
<figcaption>This is just a Placeholder Image</figcaption>
</figure>However, as said above, it is not correct to include anything else than flow-text inside a paragraph. So you have to split the markup as follows:
<p>Text is styled according to the stylesheet.</p>
<figure>
<img src="https://via.placeholder.com/200.jpg">
<figcaption>This is just a Placeholder Image</figcaption>
</figure>
<p>More flow-text.</p>