0

Подскажите, Как считать отступы между текстовыми блоками , можно ли как то реализовать это с точностью до пикселя ? Например в фотошопе отступ от одного элемента да другого 37 пикселей , но если задать margin 37px то отступ больше на 8-11 пикселей. Вот макет vk.cc/5obW5q ,

.contacts-instruction {
    width: 276px;

    
}
.contacts-instruction h3 {
    margin: 0px;
    margin-bottom: 37px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
}
.contacts-instruction p {
    margin: 0px;
    margin-bottom: 30px;
}
<div class="contacts-instruction">
  <h3>Заинтересовались обучением на нашей кафедре ?</h3>
  <p>Заполните короткую форму обратной связи и отправьте нам</p>
  <p>Мы подготовим для вас индивидуальное предложение и выйдем на связь!
  <p class="attention"><strong>Внимание!</strong>Все поля обязательны для заполнения</p>
                </div>

в разделе обратная связь например растояние между заголовком и абзацем 37 px , но если задать марджин-бот 37 Px расстояние становится где то 49 px. p.s только учусь :)

1 ответ 1

1

На это влияет свойство line-height. У заголовка размер шрифта 18px, а высота линии 24px. Значит он будет занимать по высоте 24px, сверху и снизу у него будет пустое пространство, а сам текст будет отцентрирован по вертикали. У текста снизу тоже есть какая-то высота линии, это всё и создает дополнительную пустоту. Проще всего подобрать отступы на глаз, потому что фактический размер шрифта и размер шрифта в пикселях - это разные понятия и для каждого конкретного шрифта придется считать какая высота линии сколько пустого пространства к нему добавит. Надеюсь понятно объяснил.

2
  • Большое спасибо , врубил , то есть никто не делает попиксельно ?
    – monvl
    19 июл 2016 в 19:29
  • В основном да. Кто-то может и высчитывает это всё.
    – user212578
    19 июл 2016 в 19:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.