I've encountered a puzzling situation in my code. I have two P tags with borders applied to them, leading me to believe that there should be two light blue blocks displayed. However, upon running the code, I am seeing three blocks instead of the expected two. Can someone please explain why this is happening? Any help would be greatly appreciated. Thank you for taking the time to read.
p {
margin: auto;
text-align: center;
background: lightblue;
height: 70px;
width: 200px;
border: solid 1px black;
line-height: 70px;
}<html>
<head>
<meta charset="utf-8" http-equiv="content-type">
<style media="screen">
p {
margin: auto;
text-align: center;
background: lightblue;
height: 70px;
width: 200px;
border: solid 1px black;
line-height: 70px;
}
</style>
</head>
<body>
<p><p>dddddddddddoo</p></p>
</body>
</html>