Calculate CSS padding-bottom percentage from width and height, or find container width or element height from a padding ratio for responsive boxes.

Use dimensions in one unit with the same reference scale. For CSS %, resolve dimensions first; width and height percentages can have different bases.

Padding Ratio Formula

The padding ratio is the percentage used in CSS to keep an element at a fixed aspect ratio. For the common padding-bottom method in horizontal writing, percentage padding is based on the containing block width. A zero-height box that fills that width can use this percentage to preserve its aspect ratio.

Padding % = Height / Width × 100
Height = Width × Padding % / 100
Width = Height × 100 / Padding %
  • Padding % is the CSS padding-bottom value.
  • Width is the container width or aspect ratio width.
  • Height is the target element height or aspect ratio height.

The Padding % mode takes a width and height, then returns the padding-bottom percentage needed to preserve that ratio.

Choose Element height or Container width to solve that dimension from the other dimension and padding-bottom percentage.

If you use width and height as a ratio, such as 16 and 9, the units do not matter. If you use real dimensions, use one unit and a shared reference scale. Percent width and percent height can resolve against different bases, so resolve them to comparable lengths before using this ratio.

Common Aspect Ratios and Padding Percentages

Aspect ratio Common use Padding-bottom
16:9 Widescreen video 56.25%
4:3 Standard video or older screens 75%
1:1 Square image or tile 100%
3:2 Photo layout 66.6667%
21:9 Ultrawide media 42.8571%

Example Padding Ratio Calculations

Example 1: Find padding-bottom for a 16:9 ratio

You want an element to keep a 16:9 shape.

Padding % = 9 / 16 × 100 = 56.25%

The CSS padding-bottom value is 56.25%.

Example 2: Find height from width and padding

You have a container width of 800 px and a padding-bottom value of 56.25%.

Height = 800 × 56.25 / 100 = 450

The element height is 450 px.

Padding Ratio Calculator FAQ

Why is padding-bottom based on width?

In CSS, percentage padding on an element is calculated from the width of its containing block. That includes padding-bottom. This is why a percentage can create a predictable height from a known width.

What padding-bottom gives a 16:9 ratio?

A 16:9 ratio uses 56.25% padding-bottom. The calculation is 9 divided by 16, then multiplied by 100.

Should I use the padding-bottom method or aspect-ratio in CSS?

Use the CSS aspect-ratio property when you only need modern browser support. Use the padding-bottom method when you need the older responsive ratio technique or when working with existing code that already uses it.