Всем привет. Я новичок в верстке сайтов, сверстал свой второй макет в учебных целях. В ходе верстки возникло пару вопросов:
1. Вопрос касательно высчитывания отступов у элементов типа h1-h6,
. К примеру, у меня есть
Заголовок третьего уровня
с font-size:50px. Мне необходимо сделать отступ моего заголовка от верха страницы в 20 пикселей (margin-top:20px), но при таком размере шрифта даже при нулевом значении margin имеется небольшой отступ от верха страницы, так как с увеличением размера шрифта увеличиваются отступы вокруг него. Единственное решение, которое я нашел — вручную подобрал отрицательное значение margin для h3, чтобы получить нулевой отступ, а затем из отступа, указанного в макете, отнял этот отрицательный отступ чтобы получить точное значение в 20 пикселей. Это единственное решение в данном случае? (Все отступы я предварительно обнулил в reset.css). Просто как то неудобно и нелогично высчитывать таким образом каждый отступ.
2. Может, глупый вопрос, но все же. Как все-таки правильно вычислять значение Line-height (межстрочный интервал текста)? В свойствах текста в фотошопе нашел значение интерлиньяж — пробовал ставить его, но оно тоже не всегда подходит. В ходе верстки макета я вычислял его на глаз. Есть ли какое-нибудь универсальное решение?
Заранее благодарен.
Есть css-спецификация, почитайте ее для начала. Ссылок не даю, она легко гуглится.
Насчет отступов. Если вы задаете отступ в 20px сверху, то оступ именно таким и будет. «но при таком размере шрифта даже при нулевом значении margin имеется небольшой отступ от верха страницы» — может быть вы про отступы у body? Их тоже нужно обнулять, если что. И, кстати, не у всех шрифтов высота строки равна высоте букв, есть и кривые шрифты.
Про высчитывание line-height не понял. Интерлиньяж — ну да, вроде, это и есть высота строки. А чего там вычислять-то?
Наш коллега под ником Site-creator публиковал статью у себя на сайте, но похоже сайт забросил, домен кто-то забрал, контента там уже нет. Погуглите, может найдете аналоги. Осталось только это:
Таблица значений line-height
Предлагаю вашему вниманию таблицу значений отступов от букв до верха и низа строки, для стандартного значения line-height.
Эта таблица нужна для точного определения padding или margin обрамляющего или близлежащих элементов.
Со временем самые популярные комбинации запоминаются и не нужно каждый раз смотреть значение.
Простой пример:
Заголовок у нас набран шрифтом Tahoma, размером 24px. Смотрим таблицу, расстояние от верха маленькой буквы, до верха строки – 11px.
Далее измеряем значение от верха маленькой буквы, до верхней границе блока – 33px.
Находим разность значений, получаем 22px. Значит, верхний padding блока равен 22px.
Или, если для body у нас задан размер шрифта 75%, то верхний padding будет равен 22/12=1.833em.
Включает в себя значения для шрифтов, размером от 8px до 50px:
Arial
Tahoma
Verdana
Arial Narrow
Trebuchet MS
Georgia
Times New Roman
Таблица тут https://www.site-creator.info/pro...
З.Ы. Публикуйте статьи на этом ресурсе, его забрасывать не будем ))
1. Считаю что в этих случаях pixel perfect можно и нужно приносить в жертву скорости разработки. Лучше делать на глаз. Отрицательные марджин и подобные штуки лучше не применять к тегам. Идеально к тегам вообще никаких правил не применять, а все делать на классах:)
2. Лайн-хейт текста можно посмотреть в photoshop: Window/Paragraph
Насколько я помню — если стоит auto, то это равно 1.4 (хотя за этот момент не ручаюсь)
Да, я тоже всегда делаю на глаз т.к. главное скорость, а не пару пикселей туда-сюда. :)
Большое спасибо за ответы.