Measuring the whitespace share of a layout
Arguing about whether a mockup feels airy or cramped goes faster with a number attached. Read the container size, the bounding box of the content, and how far the content sits from the left and top edge out of your design tool or dev tools, then type them in. You get the share of the area taken by whitespace, the share taken by content, the margin on each edge in pixels, and each margin as a share of the container. Measuring a before and after version of the same screen is the most useful way to use it.
The arithmetic is an area comparison. Container area is width times height, content area is content width times content height, and whitespace is the difference. The share is whitespace area divided by container area, displayed to one decimal, and any note is decided at that same precision. Edge margins come from the offsets: left equals the offset, right equals container width minus offset minus content width, and the vertical pair works the same way. Plain geometry as of October 2026, with no external standard involved.
This page measures and nothing more. It does not recommend padding, gap or line-height values per content type. That belongs to a separate spacing and density guide, and no recognized standard states a whitespace percentage that a layout should hit. Micro spacing between glyphs, overlapping blocks and regions that continue below the scroll are not part of the calculation.
Frequently Asked Questions
There is no recognized target. This page reports what your current layout measures; a useful goal usually comes from measuring other screens in the same product or a competitor side by side.
Use the width and height of the bounding box that wraps all of them. Space between the blocks counts inside the content area, so per block margins are not broken out.
The area share multiplies width by height. A layout with wide side margins but tight top and bottom margins therefore moves the area share far less than you might expect.