I know that padding is always calculated from the width but I can't say why, there is no real reason in the specs.
I just knew the answer because I had to build a webpage with squares as page elements where I used the padding technique to get it to work without fixed widhts and heights for the squares.
This is one of the CSS behaviors that can be awkward at first, but once you learn it, you will know how it's so powerful tool.
As you said you can use it to create perfect squares, even more you can create a fixed ratio between width and height for example, this is how you can create a responsive video base on this behavior:
I know that padding is always calculated from the width but I can't say why, there is no real reason in the specs.
I just knew the answer because I had to build a webpage with squares as page elements where I used the padding technique to get it to work without fixed widhts and heights for the squares.
This is one of the CSS behaviors that can be awkward at first, but once you learn it, you will know how it's so powerful tool.
As you said you can use it to create perfect squares, even more you can create a fixed ratio between width and height for example, this is how you can create a responsive video base on this behavior: