Lock margin and padding

[Alekoii]

Currently we have to use shift to select multiple padding or margin elements. This also means I cannot select margin and padding at the same time. Can we have the option to lock selected paddings and margins. Sometimes there are nested margins and paddings and it's hard to figure out what is cause the total space.

[argyleink]

lock selected paddings and margins

can you elaborate on this? maybe share a use case too?
🙂

[Alekoii]

@argyleink Currently working in a big company with multiple developers working on the same project. We are using bootstrap but some devs have added lots of custom classes and lots of usage of margin and padding. Eg. for same div - margin 4 0 0 2 and padding 0 4 4 2. Visually this looks fine total adds up to 4 4 4 4 to corresponding elements but it's messing up a lot of other elements around it. Then there are elements under this div with all weird combinations with negative margin padding.

All this causes a lot of mess and right now the flow using visbug is this. Check padding. Check margin. Do the calculation and then go change the css. 1 div at a time. This is time consuming.

If I could see the margin padding of an element at the same time like the box model in dev tools and then lock it so I can see the margin padding of elements under it, it will save a lot of time for us to fix these issues.

This situation probably happens to a lot in other places where someone not skilled in frontend is asked to work on frontend.

[argyleink]

i see! i'm trying to think if there's an easy way to do this right now, and I don't think so.

you can however select multiple elements at a time with visbug, maybe that would help?

but it sounds pretty specific here, you want to see both margin and padding simultaneously with visbug, and be able to persist that overlay so you can inspect other things. i'll think more on this and see if i can conjure something helpful.

in the meantime, maybe what you could do is write a devtools snippet that automates some of the work you're doing? like, a script that wipes out all background colors, adds a border, and draws gradients into the padding and margin boxes? kinda like creating your own overlay, without the overlay, just direct modification of the elements for debugging. thoughts?