Как правильно снять размеры в PSD для верстки?

Верстаю сайт. Есть psd макет, в нем снимаю размеры. Ширина страницы 1200, контейнер 900, например. С этим все в порядке. В контейнере есть еще паддинг горизонтальный 10px (меряю линейкой в psd). Тоже ничего сложного. Но визуально в браузере эти паддинги явно должны быть больше раза в три.
Подобная ситуация возникает не только с этим размером, но и с рядом других. Что я делаю не так? Можно ли верить после этого фотошопу?

Вот что в фотошопе (лейка в px) 8eaa74b73a1f4a6cb22a5513db255002.png

вот это в браузере (в фоне подложка из картинки макета в масштабе 100%, верстка остального, кроме контейнера, не готова, конечно)
9055c46bc1804c91aefa0c7f22024306.png

и вот код codepen.io/birdsforhardcore/pen/RrgGRJ
  • Вопрос задан
  • 4519 просмотров
Пригласить эксперта
Ответы на вопрос 6
goandkill
@goandkill
live slow — die old
Может линейка не в пикселях?
Ответ написан
Bags85
@Bags85
frontend-developer
Если я правильно понял вашу проблему, то у вас просто padding увеличивает ширину контейнера на 20px. "box-sizing: border-box" контейнеру поможет. htmlbook.ru/css/box-sizing
И почитать htmlbook.ru/content/blochnye-elementy
Ответ написан
@KuzmenkoArtem
Возможно дело в DPI ?
в фотошопе стоит слишком много или слишком мало, и поэтому кажется различие
Ответ написан
Punkie
@Punkie Куратор тега CSS
Немножечко вордпрессирую
Ну так вёрстку то покажите. Может не в макете дело а в том, что вы не обнулили изначально стандартные паддинги и не используете normalize.css.
Ответ написан
novomir
@novomir
Landing Page, CRM, Support
Скорее всего к картинке-подложке применился тоже отступ в 10px, в итоге и сдвиг получился. Примените к ней margin-left:-10px; и посмотрите на результат.
Ответ написан
@vatuma
Отступы слева на странице соответствуют макету в фотошопе. Ваша подложка съехала вправо на дополнительные 10px.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы