Why the same styling gives different results-CodePudding

Here I use an inline styling:

<!DOCTYPE html>
<html>
  <body>
    <p style="background-color: tomato; padding: 5px;">Seme text<p>
  </body>
</html>

Here I use internal styling:

<!DOCTYPE html>
<html>
    <head>
        <style>
            p
            {
                background-color: tomato; 
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <p>Seme text<p>
    </body>
</html>

The results below in picture: illustracion about the problem Can someone explain why I get those two different results?

I am expecting the two style be the same

CodePudding user response：

In both cases, you are not closing the p tag like </p>

so you have 2 p tags in your HTML

inline style only styles one ( the first one, on which it is applied ).

The internal style applies to both and that is why you see 2 rectangles.