Блог компании Поиск VPS
CSS
HTML
Веб-дизайн
Разработка веб-сайтов
Комментарии 24
+3
Исправьте последовательность в:
padding-top: 3px;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 3px;

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

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

Добавлю еще немного не в тему, для calc() на css-tricks есть еще интересное применение
+2
Объяснение
Оно устанавливает параметры относительно родительской высоты.

относительно родительской ширины

+3
Как минимум половина советов описывается в начальных книгах.
0
Мне сейчас натаскивать на веб нового и эта статья в тему.
+4
Оно устанавливает параметры относительно родительской высоты. Вам нужна демонстрация?

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

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

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

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

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


Наоборот. Не отличается от initial, а равно initial. Или visible.
0
И если уж быть совсем точным, то padding-top считается не от ширины родителя, а от ширины доступного пространства. Т. е. если у родительского блока стоит box-sizing: border-box; и есть padding или border, то их размеры вычитаются из той ширины от которой считается padding-top и т. п.
+1

Нет. Если вы возьмёте один элемент из нескольких в ряду внутри флекс-контейнера (или гридов), то обнаружите, что размер будет считаться от ширины родителя, а не «доступного пространства», которое ещё было непонятно как считать, если пришлось бы учитывать такие вещи. Но да, эта ширина считается по content-box, то есть по внутренней стороне padding (все помнят блочную модель?), так же как и при стандартные объявления вроде width: 100%.

0
Спасибо. content-box это в моем понимании и есть «доступное пространство», просто не знал как его правильно обозвать.
+2
Или перевод так-себе, или автор так-себе. Много ошибок в статье.
0
Оно устанавливает параметры относительно родительской высоты

Может все-таки ширины? И, кстати, почему только паддинг? Маргин в процентах тоже считается от ширины родительского контейнера
0
Про схлопывание конечно… нет приличных слов, сам по этим граблям ходил
0
«Трюк» с padding-top звучит как использование Undefined Behavior, особенно учитывая что в спецификации ничего про это нет (согласно данной статье). Я бы, в таком случае, воздержался от использования этого в проде, иначе есть риск нарваться на «багфикс», который добавит разъяснение в спецификации, и сделает
padding-top: x%
зависимым от высоты, а не ширины, во имя снижения количества неожиданностей в обработке.
+2

Всё там есть:


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.

Даже подчёркивают, что рассчитывается относительно ширины даже для вертикальных паддингов.

0
Интересно, спасибо. Каюсь, сам спек не читал, рассуждал только по данному в статье на момент прочтения.
0

Вы просто немного не так поняли.


нет никаких объяснений, почему так происходит. По крайней мере, я нигде не смог найти объяснений.

Эта фраза не о том, что мы имеем дело с UB, а о том, что разработчики спецификации явно указали делать так, но не объяснили, почему. Впрочем, в спецификациях мотивацию и так обычно не указывают.

0
С моей колокольни исходная фраза выглядит как «поведение вот такое, но почему именно — я найти не сумел».
Что я воспринял как «официальная документация не включает объяснений такому поведению». Иными словами, в моей интерпретации звучит как UB, тогда как, по видимости (и в комментариях уже много раз сказано) поведение в точности соответствует спецификации (i.e. «почему» — «по спецификации»). Это, безусловно, ошибка трансляции с моей стороны, но теперь я убеждён, что автор статьи тоже причастен. Ещё раз спасибо.
0
интересно, что за руководства такие читал автор, что они его не научили таким базовым вещам… всё что тут описано будет новостью только для тех кто неделю назад не знал что такое css и есть в любой мало-мальски адекватной книжке или справочнике
0
Стараюсь всегда использовать такой вариант написания
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
Вариант, padding: 0 0 0 0; не столь интуитивно понятен. Хотя никогда не было проблем с написанием его.
Если с padding еще ладно, это не критично. То всякие бэкграунды и тп, пишу только отдельными свойствами. Я когда вижу правило записанное в одну строку, но при этом имеет длину книги война и мир, хочется лично разбить такому писателю.
Конечно имхо и на истину не претендую. Просто считаю, что читать правила так легче и понятней. А не когда сначала надо строку распарсить в уме, чтобы увидеть что там написано.
0
А каким инструментарием можно вообще развернуть краткий CSS в полный и наоборот? Чтобы копья не ломать.

Сокращают, вероятно, минификаторы…
0
Скорее всего копать в сторону css shortcat expanded плагинов для вашей IDE
0
Расчет вертикальных 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%
Только полноправные пользователи могут оставлять комментарии. , пожалуйста.