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:

1. Ruler

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.

You can easily open the Ruler by using the shortcut Option+Shift+F on Mac or Alt+Shift+F on Windows/Linux - even if CSS Pro is not currently opened on the tab.

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.

2. Grid

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.

You can also set a custom keyboard shortcut to toggle Grid on your Settings.

3. Guidelines

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

3. Box-model

You can visualize the CSS box-model (margin and padding) when hovering over an element / editing its margin or padding via the Visual Editor.

To toggle it on, go to Settings > Display > CSS box-model.