0

I am designing a tool in which when you hover over an element, it gets highlighted (I do it by applying box-shadow with large radius so that it tints the element). I would now like to also visually show the padding and margin, but I don't know how to accomplish this and show it like in the inspector. Does anyone have any experience with this?

My tool description: I'm building a tool similar to WebFlow that allows to open up a page, perform modifications (change text, some CSS rules etc) there and share the updated page among colleagues.

Thanks in advance!

Amin Ya
  • 1,515
  • 1
  • 19
  • 30
Jiří Heczko
  • 13
  • 1

1 Answers1

1

You can try wrapping the div inside another for coloured margins.

Refering the link coloured padding for adding coloured padding.

Note: for margins I have used the property "display:flow-root", I am not sure if this is the best property, it may have cross browser issues.

this is with HTML and CSS alone, if you use javascript you can just get the properties of the element and add styling automatically.

.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>
Naren Murali
  • 19,250
  • 3
  • 27
  • 54