Highlights margins and padding for all HTML elements in any webpage.

Latest Version

Version
1.1
Update
July 4, 2024
Size
23.17KiB
Developer
ratedcalculator.com
Category
Users
1,000+
Rating
5 ★
Manifest Version
3
Web Store Status
Languages Support
Deutsch
English
Français
Español
हिन्दी
See more
Permissions
ActiveTab
Scripting
See more

Show All Padding & Margins Extension

Ever wanted to see the padding and margins for all elements on a web page all at once? This extension does just that, highlighting all padding and margins while providing additional information for target elements on hover. No longer will you have to troubleshoot your element positioning issues one element at a time through Chrome Dev Tools. With this extension, it's all just there for you to see.

Features:

1. Visualize Padding and Margins: Instantly see the padding and margins of all elements on a webpage, making it easier to understand and debug layout issues.
2. On-hover Details: Hover over any element to get detailed information about its padding, margin, and other styling properties.
3. Quick Toggle: Activate or deactivate the extension with a simple click on the extension icon or through the convenient keyboard shortcut Ctrl+Shift+Y.

Why You Need This Extension:

1. Save Time: Quickly diagnose and fix layout problems without digging through nested elements in Chrome Dev Tools.
Improve Workflow: Streamline your web development and design process by having a clear visual representation of element spacing.
2. Enhance Understanding: Gain a better understanding of how CSS properties like padding and margin affect your webpage layout.

Whether you're a seasoned web developer, a designer, or someone learning CSS, this extension will make your life easier by providing a clear and immediate view of the spacing properties of elements on any webpage.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "__MSG_extensionName__", "version": "1.1", "description": "__MSG_extensionDescription__", "permissions": ["activeTab", "scripting"], "default_locale": "en", "background": { "service_worker": "background.js" }, "commands": { "toggle-extension": { "suggested_key": { "default": "Ctrl+Shift+Y" }, "description": "__MSG_toggleExtension__" } }, "action": { "default_icon": { "16": "icon.png", "48": "icon.png", "128": "icon.png" } }}
Read more

Similar Extensions

icon

Font Inspector Extension · Developer Tools 1,000+ 7 ★ 30.26KiB

icon

element-spacing Extension · Developer Tools 1,000+ 4 ★ 10.89KiB

icon

Hoverify Extension · Developer Tools 1,000+ 145 ★ 14.54MiB

icon

Measure Pixel Extension · Developer Tools 1,000+ 0 ★ 27.4KiB

icon

Inspecta - validate design implementation Extension · Developer Tools 1,000+ 3 ★ 420KiB

icon

Page Ruler Extension · Productivity 1,000+ 83 ★ 256KiB

icon

Visual CSS Editor Extension · Developer Tools 1,000+ 145 ★ 414KiB

icon

Screen Ruler - Measure The Web Extension · Developer Tools 1,000+ 26 ★ 1.97MiB

icon

Pixel measurement Extension · Developer Tools 1,000+ 26 ★ 236KiB

icon

Inspect CSS Extension · Developer Tools 1,000+ 24 ★ 404KiB

icon

Measure Everything Extension · Developer Tools 1,000+ 40 ★ 52.93KiB

icon

Outline HTML Elements Extension · Developer Tools 1,000+ 1 ★ 49.84KiB

icon

Link List Extension · Productivity 1,000+ 1 ★ 12.86KiB

icon

Hover inspector like in Zeplin , Figma Extension · Developer Tools 1,000+ 29 ★ 122KiB

icon

Measuremate Extension · Developer Tools 1,000+ 42 ★ 797KiB

icon

Element Size Measurement Extension · Developer Tools 1,000+ 5 ★ 29.65KiB

icon

CSS Grid Overlay Extension · Developer Tools 1,000+ 7 ★ 181KiB

icon

CSS Viewer for Google Chrome™ Extension · Productivity 1,000+ 334 ★ 346KiB

icon

Better Ruler Extension · Developer Tools 1,000+ 52 ★ 93.66KiB

icon

Css Layout Hack Extension · Developer Tools 1,000+ 3 ★ 167KiB

icon

What Font - font finder Extension · Productivity 1,000+ 249 ★ 161KiB

icon

Inspect Element Extension · Developer Tools 1,000+ 30 ★ 162KiB

icon

Designer Tools Extension · Developer Tools 1,000+ 227 ★ 987KiB

icon

Dimensions Inspect | Gridman Extension · Developer Tools 1,000+ 87 ★ 816KiB