Как подогнать верстку под Pixel Perfect?

Question

[R1msk1y]

Приветствую!
Проблема такая.
Сверстал лендинг, теперь его нужно подогнать под Pixel Perfect. Требование заказчика.
Использую плагин Pixel Perfect для Chrome.
Ситуация примерно такая. Скрин - https://c.radikal.ru/c11/2110/8e/8f4a56bfd60a.png
Расхождения сильные, т.к. я верстал примерно в макет.
Вопрос - какие методы использовать что бы подгонять верстку к макету?
В коде у меня:
основной блок без высоты, все выравнивается по контенту.
блок header - дисплей флекс, в нем два блока. Лого с картинкой и навигация.
Ниже флекс блок, в нем три элемента:
левый - картинка;
по центру - 3 заголовка, текст, кнопка. Блок - дисплей флекс. Флекс дирекшн - column;
правый блок - картинка;

Comments

[Ankhena]

Через что позиционровать элементы - мэрджены и пэддинги подгонять?

То, что съехало, то и подгонять.
В заголовке явно съехало межбуквенное расстояние. Довольно странно подгонять его с помощью margin или padding.

Так оно блин в адаптив не лезет

Этт как?
Значит, нужно переписать адаптив или дописать дополнительные media.

теперь его нужно подогнать под Pixel Perfect. Требование заказчика.

Сначала нужно узнать допуски.
И чтобы сам макет в эти допуски попадал.
Проверять только на макетной ширине.
Но у вас в любом случае очень большие расхождения.

по центру - 3 заголовка, текст, кнопка. Блок - дисплей флекс. Флекс дирекшн - column;

Зачем бы ему флекс и column?

правый блок - картинка;

Скорее псевдо, чем img

Answer 1

[Frontend developer]

Используйте margin, padding, line-height, правильно обворачивайте все в container'ы

Answer 2

[silatal]

Изучайте подробнее flexbox'ы
Когда правильно их прописываешь, то 95% встаёт ровно по пиксель пёрфекту. Остальные 5% padding, margin, и line-height.
Центрирование элементов тоже нужно почитать. Это основа основ. Иначе будете мучаться всегда.