Show All Padding & Margins

Ever wanted to see the padding and margins for all elements on a web page all at once?

The Show All Padding & Margins Chrome extension is an essential tool for front-end developers aiming to grasp the full effect of CSS margins and padding on any web page. This extension simultaneously displays the margins and padding for all elements, offering a comprehensive visual guide. When you hover over any page element, it highlights the padding and margins, and provides detailed information about the element's dimensions and the exact sizes of its padding and margins.

hero image
chrome web store badge

Features

  • 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.
  • On-hover Details: Hover over any element to get detailed information about its padding, margin, and other styling properties.
  • Quick Toggle: Activate or deactivate the extension with a simple click on the extension icon or through the convenient keyboard shortcut Ctrl+Shift+Y.

Benefits

  • 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.
  • 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.