如何在可视化编辑器中直观地显示填充和边距

【问题标题】：How to visually show padding and margin in visual editor如何在可视化编辑器中直观地显示填充和边距
【发布时间】：2023-04-03 04:59:01
【问题描述】：

我正在设计一个工具，当你将鼠标悬停在一个元素上时，它会被突出显示（我通过应用具有大半径的 box-shadow 来为元素着色）。我现在还想直观地显示填充和边距，但我不知道如何实现这一点并像在检查器中一样显示它。有人有这方面的经验吗？

我的工具描述：我正在构建一个类似于 WebFlow 的工具，它允许打开一个页面，在那里执行修改（更改文本、一些 CSS 规则等）并在同事之间共享更新的页面。

提前致谢！

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以尝试将 div 包裹在另一个 div 中以获得彩色边距。

参考链接coloured padding 以添加彩色填充。

注意： 对于边距我使用了属性“display:flow-root”，我不确定这是否是最好的属性，它可能存在跨浏览器问题。 em>

这仅适用于 HTML 和 CSS，如果您使用 javascript，则可以获取元素的属性并自动添加样式。

.tester{
  padding:15px;
  margin:15px;
  background-image: linear-gradient(to bottom, rgba(240, 255, 40, 1) 0%, rgba(240, 255, 40, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%);
    background-clip: content-box, padding-box;
}
.wrapper{
  background-color:gray;
  display: flow-root;
}

<div class="wrapper">
  <div class="tester">
  gray is for margin and red is for padding
  </div>
</div>

【讨论】：