Investigate an unexpected gap
Inspect margins and padding around a selected element.
Find what controls a page
Start with the problem you can see.
A button sits too far from its text. Select it in the preview, inspect the margins and padding, then find the source that needs changing.
What you can do
Use it on your own website.
Inspect a misplaced button or oversized heading and find the HTML or style that controls it.
Find the style behind a heading
Review the element’s styles and filter for the property you need to understand.
Reach the matching HTML
Jump to the corresponding source when the selected element can be matched to the document.
Getting started
Make this update.
A button sits too far from its text. Select it in the preview, inspect the margins and padding, then find the source that needs changing.
- Select the visible element — Use the inspector on the heading, image or button.
- Inspect the spacing and styles — Find the property that explains the issue.
- Edit and check — Change the source and inspect the result in preview.
Useful details
Questions about this task.
Check how this works with your project and hosting.
Will page links still work normally?
Yes. Turn Inspect off to browse the page and follow links normally.
Can every rendered element be matched to source?
Not always. The browser can rearrange markup, and scripts can create elements at runtime. Source reveal works where the selected element can be matched to the editable HTML.