Как стать автором
Обновить

Комментарии 24

Исправьте последовательность в:
padding-top: 3px;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 3px;

Не по «часам».

И в данном случае лучше использовать не padding: 3px 6px 3px 6px;, а padding: 3px 6px . Разумеется, если стороны равнозначны

Добавлю еще немного не в тему, для calc() на css-tricks есть еще интересное применение
НЛО прилетело и опубликовало эту надпись здесь
Спасибо, исправлено.
Как минимум половина советов описывается в начальных книгах.
Мне сейчас натаскивать на веб нового и эта статья в тему.
Оно устанавливает параметры относительно родительской высоты. Вам нужна демонстрация?

Не высоты, а ширины.

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

Результат будет выглядеть так:
image

Не совсем так. За отступ берется не сумма а максимальное значение из Margin 1, Margin 2 и Margin 3.

Если вы работали с CSS много лет и никогда не встречались с этой проблемой, то это потому, что отступы объединяются только когда:
  • ...
  • свойство overflow отличается от «initial»;
  • ...


Наоборот. Не отличается от initial, а равно initial. Или visible.
И если уж быть совсем точным, то padding-top считается не от ширины родителя, а от ширины доступного пространства. Т. е. если у родительского блока стоит box-sizing: border-box; и есть padding или border, то их размеры вычитаются из той ширины от которой считается padding-top и т. п.
НЛО прилетело и опубликовало эту надпись здесь
Спасибо. content-box это в моем понимании и есть «доступное пространство», просто не знал как его правильно обозвать.
Или перевод так-себе, или автор так-себе. Много ошибок в статье.
Оно устанавливает параметры относительно родительской высоты

Может все-таки ширины? И, кстати, почему только паддинг? Маргин в процентах тоже считается от ширины родительского контейнера
Про схлопывание конечно… нет приличных слов, сам по этим граблям ходил
«Трюк» с padding-top звучит как использование Undefined Behavior, особенно учитывая что в спецификации ничего про это нет (согласно данной статье). Я бы, в таком случае, воздержался от использования этого в проде, иначе есть риск нарваться на «багфикс», который добавит разъяснение в спецификации, и сделает
padding-top: x%
зависимым от высоты, а не ширины, во имя снижения количества неожиданностей в обработке.
НЛО прилетело и опубликовало эту надпись здесь
Интересно, спасибо. Каюсь, сам спек не читал, рассуждал только по данному в статье на момент прочтения.
НЛО прилетело и опубликовало эту надпись здесь
С моей колокольни исходная фраза выглядит как «поведение вот такое, но почему именно — я найти не сумел».
Что я воспринял как «официальная документация не включает объяснений такому поведению». Иными словами, в моей интерпретации звучит как UB, тогда как, по видимости (и в комментариях уже много раз сказано) поведение в точности соответствует спецификации (i.e. «почему» — «по спецификации»). Это, безусловно, ошибка трансляции с моей стороны, но теперь я убеждён, что автор статьи тоже причастен. Ещё раз спасибо.
интересно, что за руководства такие читал автор, что они его не научили таким базовым вещам… всё что тут описано будет новостью только для тех кто неделю назад не знал что такое css и есть в любой мало-мальски адекватной книжке или справочнике
НЛО прилетело и опубликовало эту надпись здесь
А каким инструментарием можно вообще развернуть краткий CSS в полный и наоборот? Чтобы копья не ломать.

Сокращают, вероятно, минификаторы…
Скорее всего копать в сторону css shortcat expanded плагинов для вашей IDE
Расчет вертикальных padding от ширины, а не от высоты вполне очевиден. Точнее понятно почему не сделали «по-правильному». Допустим, если бы он считал от высоты. Как можно посчитать процент от высоты, если рассчитанное значение снова влияет на высоту. Скажем высота блока 100px и мы поставили padding-top: 20%. При стандартной блочной модели высота блока должна была бы стать равной 120px, но тогда padding стал бы равным 24px (20% от 120px). Теперь получаем, что блок должен бы уже стать высотой 124px. И снова вызывает пересчет паддинга и так до бесконечности (на самом деле мы будем стремиться к какому то числу, но не достигать его)
Для меня года два назад фича с padding в %, который считается от ширины, стала откровением, я теперь использую ее постоянно, когда нужно выдержать соотношение сторон у блока при любых размерах экрана, к примеру, если мне надо блок 4:3, я делаю ему
padding-top: 75%, и вуаля, он будет иметь такое соотношения, только нужно понимать, что для родителя надо так же установить position: relative;, а для дочернего элемента position: absolute; top: 0; left: 0;, чтобы контент не убегал вниз на эти 75%
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.