Question

在我的代码中，有两个P标签。我给了他们边境。我认为我的代码中有两个浅蓝色块因为有两个p标签。但是，如果我运行此代码，那里有三个块。我想知道为什么。请帮忙。谢谢你的阅读。

＆＃13;

p {
        margin: auto;
        text-align: center;
        background: lightblue;
        height: 70px;
        width: 200px;
        border: solid 1px black;
        line-height: 70px;
   }

＆＃13;

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

＆＃13;

Answer 1

使用浏览器的元素检查器查看实际的DOM。结果是：

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

p中的p无效。当浏览器遇到第二个<p>时，它会隐式关闭第一个p。在该行的某处，从您的无效标记中隐式创建了第三个p。

Answer 2

您无法将<p>嵌套在另一个<p>标记中。这是无效的HTML。当HTML看到这样的内容时，

它用以下内容替换你的html： -

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

Answer 3

替换

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

带

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

Answer 4

您无法嵌套<p>元素。 <p>元素表示段落。它不能包含块级元素（包括<p>本身）。如果您在浏览器中检查它，您将看到3个段落。

然而，

<div>是一个通用容器，其内容可以是内联的，例如<span>或块级。因此，<div>可以包含<p>，但不能包含其他方式。

请参阅更新的小提琴：https://jsfiddle.net/862afpo5/1/

为什么块在重叠的P标签中再添加一个？

4 个答案: