Huy's Notes
CSS - Padding and Margin notes

CSS - Padding and Margin notes


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 with the height of 50px and the width of 100px, 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 */

Referred in

If you think this note resonated, be it positive or negative, please feel free to send me an email and we can talk.