CSS:如何在盒子模型上向用户显示边缘边缘的位置

Question

考虑以下几点:

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

Answer 1

您最好将 outline 与 outline-offset 结合使用。 outline 类似于 border，但不占用布局中的任何空间，并且规则集略有不同。给定一个具有 1px 边框和 10px 边距的 div，您可以像这样添加一个轮廓:

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

有关 MDN 的更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset

不幸的是 outline-offset 在 IE 中不被支持。如果您需要支持它，那么您必须按照其他答案走伪元素路线。