Question 195863 in Html Question posted in
Some basic documentation can be found here.

Html – Text styling breaks after a child element inside it

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?

Tags:

3

Answers


  1. 0

    Because you defined two different blocks.

    The <p> element is a block-level element and should contain only inline-level elements, not other block-level elements like <div>. When defining a class, its settings will affect only the defined block-level element, not the blocks that comes after it.

    <p>
  Text is styled according to the stylesheet.
  <!-- The <img> tag is the correct tag to use. -->
  <img src="your-image-url.jpg" alt="Your Image Description">
  Text retains its styling.
</p>

    Every HTML tag has its own default settings that fit its purpose.

    Login or Signup to reply.
  2. 0

    Breaking it into two p tags would work.

    This is because

    tag is a block-level element used to represent a paragraph of text. It should only contain inline elements such as text or other inline elements like span, a, strong etc.

    p {
  font-size: 20px;
}
    <p>
  Text is styled according to the stylesheet.
</p>
  <div></div>
<p>
  Text does not lose its styling.
</p>

    Or try using a span tag or any inline element for that matter

    p {
  font-size: 20px;
}
    <p>
  Text is styled according to the stylesheet.
  <span></span><br>
  Text does not lose its styling.
</p>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search