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

【问题标题】：Highlighting margin and padding in a browser在浏览器中突出显示边距和填充
【发布时间】：2021-02-18 11:27:35
【问题描述】：

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

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

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

谢谢尼古拉斯。

【问题讨论】：

标签： html css theme-development

【解决方案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>

【讨论】：

感谢您的回答。我最初是在想这样的事情，但这让我改变了我的代码太多。事实上，我更倾向于插件.... ;(
不会有太大变化。如果我理解正确，您必须加载上面的 css 并在将鼠标悬停在元素上时，通过 JS 添加 highlight-props 类。悬停完成后，您可以删除该类。为这么小的东西寻找插件可能不可用。