为什么css before element会自动添加-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>的内容只是边境内部的内容。边界本身不是<div>相对定位的::before内容的一部分。 ::before表现如预期，因为它的top位置相对于<div>的内容区域，而不是<div>包括其边界。如果您将边框更改为2px，您会发现差异将是2px。一个-1px的top确实可以解决这个问题，但不是通用的。

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

    .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：box-shadow: 0 0 0 1px black;。这些不会影响使用它的<div>的大小。