CSS：如何向用户显示框模型上边距边缘的位置

考虑以下几点：

---

我正在编写一个调试类来显示页面上元素的位置。我想在上面显示边距边缘（虚线外），但意识到我不能使用边框，因为这是内侧边距边缘。我该怎么做呢？

border不是这样工作的，你的图像就是一个很好的例子。您可以使用第二个元素或使用

：after

创建边框，例如…

您可以使用：before/：after和position:absolute、border left/right和height:100%

长方体模型阻止此操作

正如您在原始帖子中所说，方框的边距不包括在其内容大小中。在不将

边距

更改为

填充

的情况下，这只能通过伪元素完成

---

既然您提到了它是一个类，那么您只需使用一些Javascript获取div的边距，并将伪填充设置为边距。

您可能最好将

轮廓

与

轮廓偏移量

结合使用<代码>大纲类似于边框，但不占用布局中的任何空间，并且有一组稍微不同的规则。给定一个具有1px边框和10px边距的

div

，您可以添加如下轮廓：

div {
  border: 1px solid black;
  margin: 10px;
  outline: 1px solid red;
  outline-offset: 10px;
}

有关MDN的更多信息：

---

不幸的是，

轮廓偏移量

在IE中不受支持。如果您需要支持，那么您必须按照其他答案沿着psuedoelement路线前进。

那么为什么不使用填充insted并使用border呢？我正在编写一个调试类，因此，我们希望准确地向用户显示元素边距在屏幕上的位置page@alias51：用另一个元素包装它，并给该元素一个边框。CSS中充满了你在日常工作中从不使用的东西，如果你去挖掘：）