Как рассчитать margin-top/bottom, для div-ов с текстом?

Question

[Almi90]

Начинаю разбираться с версткой.
Имею макет .psd.
На фото видно, что есть две строки, оформил их как div каждую. Застрял на определении margin-top для нижнего div.
Т.е. не могу понять где взять начальную и конечную точку для линейки.
Верстальщики хелпуйте :)

Answer 1

[Сергей]

Я думаю, стоит начать с того, что оформлять каждую строку текста как div — неверно. У вас тут есть я так понимаю заголовок? Для основного заголовка страницы используется тег h1 для остальных h2, для подзаголовков можно использовать h3, для остального теги p, span
Задавать междустрочное расстояние можно через параметр line-height в CSS.

Дивы — это блоки страницы. Для того чтобы верстать perfect pixel — используйте соответствующий плагин для браузера. Подкладываете оригинал макет задником с определенной прозрачностью и верстаете.

Comments

[Александр Лысенко]

За несколько дней на тостере я понял, что логика — это последнее что тут необходимо учитывать отвечая на вопросы

[Сергей]

AlexanderZe: Есть такое :))

Answer 2

[Александр Лысенко]

Задайте расстояние между строками при помощи line-height. Или наоборот, убейте это расстояние в тексте , а div'ы позиционируйте уже как хотите и считайте как хотите.

Answer 3

[Ankhena]

Вариантов, как обычно, много.
margin, padding, line-height и т.д.

Отступы бывают в точках, процентах, размерах шрифта и т.д.

В общем случае, если нужен PixelPerfect:
Включаете расширение PixelPerfect для браузера, подкладываете изображение под верстку.
Ставите примерные значения для нужных свойств.
Открываете инспектор кода.
Ставите мышку на значение свойств и нажимаете кнопки вверх или вниз. Когда верстка совпадет с изображением, смотрите получившиеся значения. Все.