Highlighting margin and padding in a browser

Question

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.

Answer 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>