在浏览器中突出显示边距和填充

如何解决在浏览器中突出显示边距和填充

我想知道是否有可能在页面中突出显示（逻辑上）不可见的边距和填充。就像我们使用浏览器的检查器开发工具但永久一样。

目的是在浏览器中查看是否在逻辑思维中设置了边距和填充。

最简单的方法是浏览器插件？

谢谢 尼古拉斯。

解决方法

没有直接的方法，但您可以使用 background 属性来实现相同的目的。从下面的代码中，您可以将 highlight-props 类名添加到应该突出显示道具的父元素中。

.parent {
  background-color: var(--margin-color);
  display: inline-block;
}

.child {
  margin: 40px;
  padding: 40px;
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 30px solid grey;
}

.highlight-props {
  --margin-color: orange;
  --padding-color: blue;
  --border-color: green;
  --content-color: yellow;
}

.highlight-props > * {
  background-image: linear-gradient(var(--content-color),var(--content-color)),linear-gradient(var(--padding-color),var(--padding-color));
  border-color: var(--border-color);
  background-clip: content-box,padding-box;
}

<div class="parent highlight-props">
  <div class="child">
  </div>
</div>