Comments 24
Исправьте последовательность в:
Не по «часам».
И в данном случае лучше использовать не
Добавлю еще немного не в тему, для calc() на css-tricks есть еще интересное применение
padding-top: 3px;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 3px;
Не по «часам».
И в данном случае лучше использовать не
padding: 3px 6px 3px 6px;
, а padding: 3px 6px
. Разумеется, если стороны равнозначныДобавлю еще немного не в тему, для calc() на css-tricks есть еще интересное применение
+3
UFO just landed and posted this here
Как минимум половина советов описывается в начальных книгах.
+3
Оно устанавливает параметры относительно родительской высоты. Вам нужна демонстрация?
Не высоты, а ширины.
Если вы так сделаете, браузер заметит три смежных поля и захочет объединить их в один большой блок.
Результат будет выглядеть так:
Не совсем так. За отступ берется не сумма а максимальное значение из Margin 1, Margin 2 и Margin 3.
Если вы работали с CSS много лет и никогда не встречались с этой проблемой, то это потому, что отступы объединяются только когда:
- ...
- свойство overflow отличается от «initial»;
- ...
Наоборот. Не отличается от initial, а равно initial. Или visible.
+4
И если уж быть совсем точным, то padding-top считается не от ширины родителя, а от ширины доступного пространства. Т. е. если у родительского блока стоит
box-sizing: border-box;
и есть padding или border, то их размеры вычитаются из той ширины от которой считается padding-top и т. п. 0
Или перевод так-себе, или автор так-себе. Много ошибок в статье.
+2
Оно устанавливает параметры относительно родительской высоты
Может все-таки ширины? И, кстати, почему только паддинг? Маргин в процентах тоже считается от ширины родительского контейнера
0
Про схлопывание конечно… нет приличных слов, сам по этим граблям ходил
0
«Трюк» с padding-top звучит как использование Undefined Behavior, особенно учитывая что в спецификации ничего про это нет (согласно данной статье). Я бы, в таком случае, воздержался от использования этого в проде, иначе есть риск нарваться на «багфикс», который добавит разъяснение в спецификации, и сделает
padding-top: x%
зависимым от высоты, а не ширины, во имя снижения количества неожиданностей в обработке. 0
UFO just landed and posted this here
Интересно, спасибо. Каюсь, сам спек не читал, рассуждал только по данному в статье на момент прочтения.
0
UFO just landed and posted this here
С моей колокольни исходная фраза выглядит как «поведение вот такое, но почему именно — я найти не сумел».
Что я воспринял как «официальная документация не включает объяснений такому поведению». Иными словами, в моей интерпретации звучит как UB, тогда как, по видимости (и в комментариях уже много раз сказано) поведение в точности соответствует спецификации (i.e. «почему» — «по спецификации»). Это, безусловно, ошибка трансляции с моей стороны, но теперь я убеждён, что автор статьи тоже причастен. Ещё раз спасибо.
Что я воспринял как «официальная документация не включает объяснений такому поведению». Иными словами, в моей интерпретации звучит как UB, тогда как, по видимости (и в комментариях уже много раз сказано) поведение в точности соответствует спецификации (i.e. «почему» — «по спецификации»). Это, безусловно, ошибка трансляции с моей стороны, но теперь я убеждён, что автор статьи тоже причастен. Ещё раз спасибо.
0
В спецификации как раз и сказано от чего считается padding в процентах: https://www.w3.org/TR/CSS2/box.html#propdef-padding-top
Percentages: refer to width of containing block
0
интересно, что за руководства такие читал автор, что они его не научили таким базовым вещам… всё что тут описано будет новостью только для тех кто неделю назад не знал что такое css и есть в любой мало-мальски адекватной книжке или справочнике
0
UFO just landed and posted this here
Расчет вертикальных padding от ширины, а не от высоты вполне очевиден. Точнее понятно почему не сделали «по-правильному». Допустим, если бы он считал от высоты. Как можно посчитать процент от высоты, если рассчитанное значение снова влияет на высоту. Скажем высота блока 100px и мы поставили padding-top: 20%. При стандартной блочной модели высота блока должна была бы стать равной 120px, но тогда padding стал бы равным 24px (20% от 120px). Теперь получаем, что блок должен бы уже стать высотой 124px. И снова вызывает пересчет паддинга и так до бесконечности (на самом деле мы будем стремиться к какому то числу, но не достигать его)
0
Для меня года два назад фича с padding в %, который считается от ширины, стала откровением, я теперь использую ее постоянно, когда нужно выдержать соотношение сторон у блока при любых размерах экрана, к примеру, если мне надо блок 4:3, я делаю ему
padding-top: 75%
, и вуаля, он будет иметь такое соотношения, только нужно понимать, что для родителя надо так же установить position: relative;
, а для дочернего элемента position: absolute; top: 0; left: 0;
, чтобы контент не убегал вниз на эти 75% 0
Sign up to leave a comment.
Советы по CSS, которые вы вряд ли найдете в самоучителях