Measuring distances and checking alignments
CSS Pro is your new best friend to measure distances and check alignments.
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 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:
See the horizontal and vertical red lines that goes from the element to the edge of the window
To toggle it on, go to Settings > Display > CSS box-model.