UP | HOME

Padding and margin are related to element's width

CSS padding property can have a fixed value, or a percentage.

When a percentage is applied, the size of the padding is now related to the width of the containing block.

So, even when you have a div that 50px height, 100px wide, and you set its padding-top to 50%, it will be 50px regardless to the height, even if you set the height to 0.

The same with margin.

By using this attribute of padding, we can create a aspect ratio friendly elements where the height is calculated automatically based on the width, even in a fluid environment. For example, we create an element that in the ratio of 16:9 by:

parent {
   with: something;
}

div {
   height: 0;
   padding-top: 56.25%; /* 9 / 16 = 0.5625 */
}

Date: 2019-02-14 Thu 00:00

Author: Huy Tran

Created: 2019-04-22 Mon 14:41