#заметка дня

Настало время просить прощения и извиняться.

В опросе про паддинг в процентах, вкралась досадная ошибка. Правильный ответ — ширины родителя.

Давайте разбираться, откуда взялась ошибка. Для начала, конечно, хочется отметить, что отступы в процентах приходится задавать довольно редко. И тот случай, который сходу приходит мне в голову — это задание фиксированного соотношения сторон. Например, если вам нужно адаптивно выставить миниатюры в 16:9 на десктопе и в квадрат — на мобиле. Смотрим тут, собственно: https://t.me/htmlshit/496

Давайте обратимся к спецификации:
https://www.w3.org/TR/CSS21/box.html#padding-properties

Она что говорит: "The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1."

Что это значит на практике? Ну, что я облажался. Поля (padding) считаются от ширины содержащего блока. И вертикальные, и горизонтальные. Кстати, отступы (margin) — тоже.

Т. е. — от ширины родителя. При этом, если ширина родителя зависит от ширины элемента, поведение не определено и целиком отдаётся браузеру.

В качестве примера, возьмём кодпен от Ильи Стрельцына: https://codepen.io/SelenIT/pen/MWrNvEz

За что ему огромное спасибо.

А вот большой пример и с позицией в процентах, и с полями и с отступами: https://codepen.io/spex/pen/jmVaPK?editors=1100

Разница сразу заметна.

Не болейте.

#css #padding #sorry