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
    Commented 19 июл. 2016 в 19:29
  • В основном да. Кто-то может и высчитывает это всё.
    – user212578
    Commented 19 июл. 2016 в 19:37

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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