Что такое баг 4px?

Question

[dron112]

Что значит баг четырёх пикселей в вёрстке?
Слышал о нём из интервью у IT-Бороды.
Из-за этого бага дизайнеры стараются делать отступы в макетах кратными 4.
Но про этот баг, четырех пикселей нет информации в гугле.

Comments

[Владислав Лысков]

вот у некого it-бороды и спроси, ничего такого не существует

[Антон Литвиненко]

Если бы дизайнеры в макетах придерживались хоть какой-то логики мир был бы проще

[Dmitriy Konovalov]

Возможно, имелось ввиду что при таком виде

<style>
.block {
   display: inline-block;
}
</style>

<div class="block"></div>
<div class="block"></div>

когда у элементов прописан inline-block и переносить их построчно, то будет добавляться отступ в 4px, так вот отступ в 4px это пробел, пробел имеет такую ширину. Убирается у родителя через font-size: 0;, либо отрицательным отступом у блока margin-right: -4px;.

[Tonykark9597]

про баг 4px никогда не слышал
нормальные дизайнеры делают все кратно 4, потому что это удобно, легко считается, особенно при уменьшении в адаптиве, и не только с отступами, но и целом с размерами небольших объектов (иконки, кнопки и т.п.)

[profesor08]

Dmitriy Konovalov, встречал такое у картинок, лечится задав vertical-align: top, а всякие font-size: 0 это костыль, ни разу не приходилось использовать, аналогично и с margin-right: -4px. Отрицательный margin использую только когда надо чуть растянуть блок за пределы его контейнера.

[Ankhena]

Tonykark9597,

особенно при уменьшении в адаптиве

А если окно уменьшилось на треть по сравнению с оригиналом? Как кратность 4 чему-то там поможет?

нормальные дизайнеры делают все кратно 4

Нормальные дизайнеры рисуют, чтобы глазу пользователя было приятно, а не всё кратно 4

[Sun_Day]

Так напиши айти бороде(очередной петушиный блогер?) и спроси. Потом расскажешь нам шо это за баг.

[wisgest]

Sun_Day, что значит «петушиный»?

Answer 1

[Андрей Титов]

- От куда взялись лишние пиксели в верстке?
- Пол-пикселя?
- 10 CSS-уловок, которые Вы могли не знать

Comments

[wisgest]

Это не ответ: все три ссылки (не) имели бы точно такое же отношение к вопросу, если бы в нём вместо 4 было бы 3 или 5.

Answer 2

[McBernar]

4-пиксельные отступы в дизайне — это просто удобно и стало неким стандартом. Больше вариативность, чем 5px и уж тем более удобнее 10px. Изначально пришло из мобильной разработки.

Эта сетка позволяет не идти на поводу у цифр (например, когда надо сделать отступ строго не меньше 10px, хотя визуально просится поменьше), но при этом держать стили в порядке, чтобы разработчик с ума не сошел и логика в дизайне была.

К багу, о чем бы ни шла речь, это отношения не имеет.