为什么css before元素自动添加-1px的底部定位

Question

我正在尝试对齐两个尺寸相同的盒子。第一个是 div，第二个是 div 的 :before 伪元素，但由于某种原因，伪元素在底部的位置为 -1px，而框不是对齐。我不明白为什么会这样。浏览器似乎无缘无故地添加了定位距离，当删除边框时一切正常。这是浏览器错误还是我做错了什么。

div {
 position: relative;
 width: 50px;
 height: 50px;
 border: 1px solid;
}

div::before {
 position:absolute;
 content: '';
 left: 50px;
 width: 50px;
 height: 50px;
 border: 1px solid;
}

<div></div>

Answer 1

<div>的内容只是边框里面的内容。边框本身不是 ::before 相对定位的 <div> 内容的一部分。 ::before 的行为符合预期，因为它的 top 位置是相对于 <div> 的内容区域，而不是 <div> 包括其边框。如果您将边框更改为 2px，您会注意到差异将是 2px。 -1px 的 top 确实可以解决这个问题，但不是以通用的方式。

解决此问题的最佳方法是使用容器 <div> 作为相对块而不是 ::before:

的拥有者 <div>

    .container {
      position: relative;
    }
 
    .inner {
   width: 50px;
   height: 50px;
   border: 1px solid;
    }

    .inner::before {
   position:absolute;
      top: 0;
   content: '';
   left: 50px;
   width: 50px;
   height: 50px;
   border: 1px solid;
    }

    <div class="container">
       <div class="inner"></div>
    <div>

另一种方法是使用 outline 值或框阴影：box-shadow: 0 0 0 1px black;。这些不会影响使用它的 <div> 的大小。

为什么css before元素自动添加-1px的底部定位

Why css before element automatically adds bottom positioning of -1px

css

alignment

pseudo-element