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

Question

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

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

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

谢谢尼古拉斯。

Answer 1

没有直接的方法，但您可以使用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>