myeongsooKim myeongsooKim - 20 days ago 8
CSS Question

Why does block add one more in ovelapped P tags?

In my code, there are two P tag in there.
And I gave them border.
I think there are two lightblue block in my code
beacuse there are two p tags.
But if I run this code, There are Three Blocks in there.
I want to know why.
Please help. Thanks for reading.

here is jsfiddle : https://jsfiddle.net/pengpocket/862afpo5/

<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>

Answer

replace

<body>
    <p><p>dddddddddddoo</p></p>
</body>

with

<body>
    <p></p>
    <p>dddddddddddoo</p>
</body>