Почему padding-bottom: 100% делает из блока квадрат?

Question

[Username]

Здравствуйте, почему при добавлении свойств

position: relative;
padding-bottom: 100%;

блок становится квадратным?
Мне интересна физика самого преобразования за счёт чего это происходит?

Answer 1

[Anton Filippov]

ну вообще, не квадрат получается, а изначальная высота блока + квадрат, сторона квадрата равна ширине родителя, допустим body.

без position: sticky то же самое

Answer 2

[Dima Polos]

Паддинг если задавать в процентах, он берется от ширины родителя, вот и выходит, что высота равна ширине, и как бы квадрат, но после паддинга можно ж и контент вставить, который его растянет вниз, и квадрата не будет.

Comments

[Username]

Не-не, изначально высота не задана и равна 0 и по идеи, если я беру 100% от высоты, а высота 0, то и паддинг должен быть нулевым.

[Dima Polos]

На этой особенности как раз создаются пропорциональные элементы, у которых ширина и высота пропорциональны. Создается блок, в который вкладывается другой и задается паддинг боттом или топ, не суть, в процентах, например 56.25%, что соответствует соотношению 16:9, часто видео в таких пропорциях. Далее в этот блок вкладывается еще один блок, позионируется абсолютно и растягивается по ширине и высоте на родителя, а в него уже вставляется видео, например iframe с youtube, и видео становится респонзив, без потери пропорций, без черных полос по краям при ресайзе.

[Dima Polos]

Username, от ШИРИНЫ родителя.

[Username]

Dima Polos, а в документации где-нибудь упоминается про эту особенность?

[Dima Polos]

htmlbook.ru/css/padding
www.w3.org/TR/CSS21/box.html#propdef-padding
Вот. Сорри, от ширины родителя, ошибся.