css - CSS：如何在盒子模型上向用户显示边距边缘的位置

Question

考虑以下：

在此处输入图像描述

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

score 5 · Accepted Answer

您可能最好将 aoutline与outline-offset. outline类似于边框，但不占用布局中的任何空间，并且规则集略有不同。给定div具有 1px 边框和 10px 边距的 a，您将添加如下轮廓：

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

不幸outline-offset的是，IE 不支持。如果您需要支持，那么您将不得不按照其他答案走伪元素路线。

score 1 · Accepted Answer

盒子模型可以防止这种情况。

正如您在原始帖子中一样，框的边距不包含在其内容大小中。在不改变你margin的padding情况下，只能使用伪元素来完成。

既然您提到它是一个类，您可以简单地使用一些 Javascript 获取 div 的边距并将伪填充设置为边距。

score 0 · Accepted Answer

这不是边框的工作方式，您的图像就是一个很好的例子。您可以使用第二个元素或使用:after例如...

score 0 · Accepted Answer

0

您可以将 :before/:after 与 position:absolute、border-left/right 和 height:100% 一起使用

于 2013-08-21T11:56:38.763 回答

4 回答 4