Show All Padding & Margins

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

Show All Padding & Margins - Chrome Extension

"Show All Padding & Margins" is a Chrome extension that visually highlights the padding and margins of all HTML elements on a webpage. It offers on-hover details about each element's spacing properties, making it easier to diagnose and fix layout issues quickly. With a simple toggle feature and an intuitive interface, the extension streamlines your web development workflow, enhancing your understanding of how CSS affects layouts.
Install from Chrome Web Store

Extension stats

Users: 1,000+
Rating: 5.00
(1)
Version: 1.1 (Last updated: 2024-07-05)
Creation date: 2024-06-30
Risk impact: Very low risk impact
Risk likelihood:
Manifest version: 3
Permissions:
  • activeTab
  • scripting
Size: 23.73K
URLs: Website

Other platforms

Show of Hands Polls & Politics (v6.2.7)
3.54 (959) 43,548+
Not available on Firefox
Not available on Edge
Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Extension summary

Analyze keywords

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.

User reviews

by Zketra, 2024-12-20

I've wanted something like this for years. Easy to use. Wish this functionality was a part of Chrome.
by Wes, 2024-07-04
View all user reviews

Extension safety

Risk impact

Show All Padding & Margins does not require any sensitive permissions.

Risk likelihood

Show All Padding & Margins is probably trust-worthy. Prefer other publishers if available. Exercise caution when installing this extension.

Upgrade to see risk analysis details

Promo images

Show All Padding & Margins small promo image
Small promo image

Similar extensions

Here are some Chrome extensions that are similar to Show All Padding & Margins: