Guidelines when hovering elements

[Svish]

When hovering elements in the DevTools Elements tab, it highlights the element on the page, with things like gaps, paddings and margins in different colors.

Would be really helpful if it was possible to also get some guidelines to make it easier to see whether elements and text line up.

For example the following two custom input elements, do they and all 3 pieces of text line up? Would be much easier to check with some guidelines:

Here's how it looks with FireFox DevTools:

AB#42132065

[captainbrosset]

Indeed the guidelines in Firefox are quite useful. It seems, however, that you might need a different kind of tool here. If the hovered element had more padding, then the way Firefox does it wouldn't be as useful, since you would get the guidelines pretty far away from the text.

It seems to me like a ruler would be more useful here. Something that you could toggle and that would draw a horizontal and a vertical guide on the page, which you could then move freely with the mouse.

I found this browser extension which might help a lot: https://chrome.google.com/webstore/detail/grid-ruler/joadogiaiabhmggdifljlpkclnpfncmj

Would that help address your issue?

[Svish]

@captainbrosset The guildelines in Firefox could indeed be even better than they are, but they are at least there and do help.

The extension you link to is also somewhat helpful, and I actually already use one similar to it, but honestly it's kind of annoying and finnicky to use. Espcially with various zoom-levels, and sub-pixel inaccuracies, it's often difficult for me to trust that I've actually placed the guidelines correctly.

Would be much better if this was a feature built-in with the dev-tools, that could optionally add guidelines for, for example, margin, border, padding, text-baseline, etc. for elements. Some of them could always be shown on hover, like in Firefox, and maybe some could be toggled on a per element basis. Like, "please show me a guideline for the text-baseline of this element".

Could be even more helpful if there was a way to show offsets to other elements guidelines, like (I think) can be done in Figma and tools like that.

[captainbrosset]

Thanks for the extra details there @Svish! This is helpful.
I'll make sure this shows up on the DevTools' team backlog for evaluation and prioritization.