Show All Padding Margins Chrome extension icon

Show All Padding Margins

👥 4K+ users
📦 v1.1.1
💾 23.38KiB
📅 2025-01-31
View on Chrome Web Store

Chrome will indicate if you already have this installed.

Overview

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.

Tags

Productivity/developer productivity/developer

Privacy Practices

Not being sold to third parties, outside of the approved use cases
Not being used or transferred for purposes that are unrelated to the item's core functionality
Not being used or transferred to determine creditworthiness or for lending purposes

🔐 Security Analysis

This extension hasn't been security-scanned yet.

Capture a screenshot of your current page in entirety and reliably—without requesting any extra permissions!
Productivity/developer AI
브라우저에서 라온시큐어의 PC보안 기능을 사용하기 위한 확장 프로그램입니다.
Productivity/developer
Adds React debugging tools to the Chrome Developer Tools. Created from revision 3cde211b0c on 10/20/2025.
Productivity/developer