div's p descendend strange formatted when p is styled before

Question

I want to skill up my css skill up, so I doing some excercises. One of them is create 80% width div with paragraph inside of it. So I created div:

<div class="centered">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, at?</p>
</div>

than I created styles for it:

 .centered {
            width: 80%;
            height: 100vh;
            text-align: center;
            background-color: indianred;
            /*border: 1px solid black; */
            margin: auto;
 }

and then I discovered than p paragraph is outside the div element. Like on the screen:

I investigeted a little bit and find out I have some p styling before div styling:

p {
        color: gray;
        background: white;
        font-style: normal;
  }

And that was the problem, so I created .centered>p stiling with higher specificity, like so:

.centered>p {
        color: black;
        font-weight: bold;
        background-color: inherit;
}

and that helps. But I also discovered one thing: When I add border to div element, the p paragraph jumps into this div(just comment out border property from div styling block). Result looks like so:

Could you please explain what is the connection between this div and p elements? Why p is not a part of a div when it is styled before? And why it IS part of a div when div get some border?

I don't get it. It is a css-specificity issue? I put all code to this question as a snipped, but it also can be found on codepen -> https://codepen.io/nowakpawel/pen/jOPvmMv

p {
        color: gray;
        background: white;
        font-style: normal;
    }
.centered {
        width: 80%;
        height: 100vh;
        text-align: center;
        /* line-height: 100vh; */
        background-color: indianred;
/*         border: 1px solid black; */
        margin: auto;
    }
/* .centered>p {
        color: black;
        font-weight: bold;
        background-color: inherit;
    } */

<div class="centered">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing         elit. Animi, at?</p>
</div>