1

I would know if it was possible to highligth the (logically) invisible margin and padding in a page. Like when we use the inspector dev tools of a browser but permanently.

The purpose is to see in the browser if margins and paddings are set in a logical thought.

The easiest way would be a browser plugin ?

Thank's Nicolas.

Mr_Green
  • 40,727
  • 45
  • 159
  • 271
nico
  • 19
  • 6

1 Answers1

1

There isn't direct way but you can use background properties to achieve the same. From below code, you can add highlight-props class name to the parent element to which the props should be highlighted.

.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>
Mr_Green
  • 40,727
  • 45
  • 159
  • 271
  • 1
    Thank you to answer. I was firstly thinking something like this, but this make me change my code too much. In fact I was more incline for a plugin.... ;( – nico Feb 18 '21 at 23:03
  • It won't change much. If I understand correctly, you have to load the above css and when hovered on an element, add the highlight-props class through JS. You can remove the class once hover is done. Looking for plugin for something this small might not be available. – Mr_Green Feb 19 '21 at 03:51