There are 3 features to help you with that:
When you want to check the alignments on your layout, or simply get a good sense of spacing from your favorite websites, you'll love our Ruler feature.
It basically measures distances between everything you see on your browser, in real-time, even if it's an image.
Or you can also open it from the main topbar, by clicking on "Ruler".
You can also click, drag and drop to measure in "free-style". The box that will be created is resizable and movable, which makes it even easier to use CSS Scan Pro to measure anything on the web and finish your work faster. Use the "Delete" key to remove the box.
The grid settings outline all elements on the page with a red border.
To toggle it on, go to Settings > Display > Grid.
This makes it easier to understand the CSS box constraints and how layouts are built.
Guidelines are enabled by default on CSS Scan Pro but can be turned off on your Settings > Display > Guidelines.
Guidelines help you understand how an element aligns with the rest of the page:
You can visualize the CSS box-model (margin and padding) when hovering over an element / editing its
padding via the Visual Editor.
To toggle it on, go to Settings > Display > CSS box-model.