CSS Pro
  • Initial page
  • Quick Start
    • Installing it
      • On Google Chrome
      • On Firefox
      • On Safari
  • Inspecting
    • Choosing what happens when you click on an element
    • Inspecting invisible, overlapping, and parent elements
    • Comparing multiple elements at the same time (Pinning)
    • Measuring distances and checking alignments
    • Inspecting animations
    • Identifying fonts
  • Editing
    • Code Editor (Code tab)
      • Forcing a state or pseudo
    • Visual Editor (Design tab)
      • Editing media queries and pseudo states
      • Editing backgrounds
      • Auto unit conversion
    • HTML Editor (HTML tab)
    • Handling CSS changes
    • Editing texts
    • Removing elements
  • Copying
    • Copying CSS and HTML
    • Exporting elements
    • Downloading page assets (images)
    • Copying colors
  • License
    • Managing your license activations
    • Retrieving your license key (forgot)
  • Subscription
    • Switching from the monthly to the annual plan
    • Canceling your subscription
Powered by GitBook
On this page
  • 1. Ruler
  • 2. Grid
  • 3. Guidelines
  • 3. Box-model

Was this helpful?

  1. Inspecting

Measuring distances and checking alignments

CSS Pro is your new best friend to measure distances and check alignments.

PreviousComparing multiple elements at the same time (Pinning)NextInspecting animations

Last updated 2 years ago

Was this helpful?

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:

3. Box-model

To toggle it on, go to Settings > Display > CSS 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
See the horizontal and vertical red lines that goes from the element to the edge of the window