Html 为什么浏览器在 Select 一个包裹在  标签中的块级元素后包含相邻元素

发布于12月15日

As shown in the figure below, when I select the first a tag, the browser will include the following a tag, and the margin of the P element in the A tag is also collapsed with the .box2.How to explain this ?

   .box1 {
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
      }
      p {
        margin-top: 10px;
      }

   <div class="box1"></div>
    <div class="box2">
      <a href="#">
        <p>abc</p>
      </a>
      <a href="#">abc</a>
    </div>

推荐答案

在内联元素(链接)内有一个块元素(第p个)，然后紧接着是一个内联元素(第二个链接).

这里有一个更好的插图，有一些填充和轮廓.

p {
  margin-top: 10px;
}


a:first-child {
  padding: 0 5px;
  outline: 1px solid red;
}

<div class="box2">
  <a href="#">
    <p>abc</p>
  </a>
  <a href="#">abc</a>
</div>

在内联元素中使用块元素将激活一个复杂的机制，在该机制中，您将在块元素之前有一个内联内容，在块元素之后有另一个内联内容(由轮廓突出显示).由于您还有a个也是内联元素，因此它将与第二个内联内容在同一行上.

DevTool将向您显示同时包含行内内容(红色)和块内容(p)的矩形区域以及下一个a，因为它恰好在同一行.

当内联框包含流内块级框时，内联框(及其在同一行框内的内联祖先)围绕块级框(以及任何连续或仅由可折叠空格和/或流外元素分隔的块级同级项)被拆分，将内联框拆分为两个框(即使两边都是空的)，块级框的两边各一个.分隔符之前和之后的行框包含在匿名块框中，块级框成为这些匿名框的同级框.当这样的内联框受相对定位影响时，产生的任何平移也会影响内联框中包含的块级框.^ref