Вопрос по верстке: есть некоторый макет (данный взят с первого попавшегося сайта, но актуально для всех, имеющих печатный текст), в нем есть
header с текстом в правой части. По макету отступ от верхнего края хедера до номера телефона должен быть
45px, ширина и высота блока с номерами и надписью "обратная связь" исходя из макета должны получиться
256px и
81px соответственно.
Реализация конкретно блока с телефоном и надписью "обратная связь":
<header>
<div class="container">
<div class="contacts">
<span class="contacts__phone">+7(499) 777-77-77</span>
<span class="contacts__phone">+7(499) 777-77-77</span>
<span class="contacts__feedback">Обратная связь</span>
</div>
</div>
</header>
CSS стили (для текста вытащил из Zeplin, шрифты подключил через Google Fonts).
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,wght@0,300;0,700;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
.container {
max-width: 980px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
header {
padding: 45px 0 65px;
background-color: #ddd;
}
.contacts {
display: flex;
flex-direction: column;
text-align: left;
}
.contacts__phone {
font-family: 'Open Sans Condensed';
font-size: 40px;
font-weight: 300;
font-stretch: condensed;
line-height: 1.15;
letter-spacing: 1px;
color: #767676;
}
.contacts__feedback {
font-family: PTSans;
font-size: 24px;
font-weight: 900;
line-height: 1.92;
letter-spacing: 0.6px;
color: #767676;
}
Результат (без подчеркивания "Обратная связь"):
Что получаю на практике:
Ширина блока получается чуть больше требуемой - 258.7px заместо должной 256px. Равно как и высота блока, которая получилась 119px вместо 81px. Виной этому, как можно заметить на рисунке ниже, отступы вокруг текста, которые и дают небольшую прибавку по бокам и весомую прибавку по вертикали.
Промежуток между последним номером телефона и надписью "Обратная связь" должен быть 10px, сейчас уже есть некоторый промежуток из-за установленных
line-height. Отсюда верстка получается неверной: поскольку отступ от верхней части хедера до номера телефона должен быть 45px, я дал хедеру верхний
padding в эти 45px, но
line-height добавляет лишнее количество пикселей.
Собственно, каковы вопросы:
1. Что делать в таких ситуациях, как убирать ненужные отступы, чтобы получалось"пиксель в пиксель" (или хотя бы очень близко к этому)?
2. Где еще могут встретиться подобные проблемы? (знаю, например, что между стоящими в ряд
inline-block элементами появляется пробел. Или, к примеру, изображение, дающее небольшой отступ вниз)
3. Уместно ли корректировать подобные вещи подгоном
line-height под высоту текста, отрицательными
margin-ми, относительным позиционированием,
transform: translate?
4. Как к таким моментам относятся реальные заказчики?
Я только недавно начал изучение web-разработкy, поэтому слабо представляю, как все это происходит на реальных проектах.
5. Существует ли адекватная и удобная линейка для измерений непосредственно в браузере?
Заранее спасибо всем за ответы!
