Всем привет. Я новичок в верстке сайтов, сверстал свой второй макет в учебных целях. В ходе верстки возникло пару вопросов:

1. Вопрос касательно высчитывания отступов у элементов типа h1-h6,

. К примеру, у меня есть

Заголовок третьего уровня

с font-size:50px. Мне необходимо сделать отступ моего заголовка от верха страницы в 20 пикселей (margin-top:20px), но при таком размере шрифта даже при нулевом значении margin имеется небольшой отступ от верха страницы, так как с увеличением размера шрифта увеличиваются отступы вокруг него. Единственное решение, которое я нашел — вручную подобрал отрицательное значение margin для h3, чтобы получить нулевой отступ, а затем из отступа, указанного в макете, отнял этот отрицательный отступ чтобы получить точное значение в 20 пикселей. Это единственное решение в данном случае? (Все отступы я предварительно обнулил в reset.css). Просто как то неудобно и нелогично высчитывать таким образом каждый отступ.

2. Может, глупый вопрос, но все же. Как все-таки правильно вычислять значение Line-height (межстрочный интервал текста)? В свойствах текста в фотошопе нашел значение интерлиньяж — пробовал ставить его, но оно тоже не всегда подходит. В ходе верстки макета я вычислял его на глаз. Есть ли какое-нибудь универсальное решение?

Заранее благодарен.

Оценить:|
  
Комментировать
Раздел: Помощь    
Просмотров: 3721
Комментариев (5)
  1. kukushka
    18.11.2012 в 17:57

    Есть css-спецификация, почитайте ее для начала. Ссылок не даю, она легко гуглится.

    Насчет отступов. Если вы задаете отступ в 20px сверху, то оступ именно таким и будет. «но при таком размере шрифта даже при нулевом значении margin имеется небольшой отступ от верха страницы» — может быть вы про отступы у body? Их тоже нужно обнулять, если что. И, кстати, не у всех шрифтов высота строки равна высоте букв, есть и кривые шрифты.

    Про высчитывание line-height не понял. Интерлиньяж — ну да, вроде, это и есть высота строки. А чего там вычислять-то?

  2. Greg
    Григорий Кочнев [Greg]
    18.11.2012 в 18:59

    Наш коллега под ником 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

    Таблица тут http://www.site-creator.info/pro...

    З.Ы. Публикуйте статьи на этом ресурсе, его забрасывать не будем ))

  3. Vlad Argentum [vargentum]
    18.11.2012 в 19:47

    1. Считаю что в этих случаях pixel perfect можно и нужно приносить в жертву скорости разработки. Лучше делать на глаз. Отрицательные марджин и подобные штуки лучше не применять к тегам. Идеально к тегам вообще никаких правил не применять, а все делать на классах:)
    2. Лайн-хейт текста можно посмотреть в photoshop: Window/Paragraph
    Насколько я помню — если стоит auto, то это равно 1.4 (хотя за этот момент не ручаюсь)

  4. sashavnuk
    19.11.2012 в 13:15

    Большое спасибо за ответы.

Оставить комментарий