Отступы в макете и на сайте

[Firin]

Я только начинаю учиться, поэтому интересует очень важный вопрос. Измеряю расстояние в макете от текста до верхней линии. Например он 50 пикселей. Когда задаю это в файле CSS все хорошо. Но когда захожу через гугл хром проверяю расстояние, во первых оно визуально больше. Во вторых наведя на блок с текстом будь это <p> либо <div> показывает дополнительное расстояние от текста до края этого блока. Внимание вопрос, как этого избежать? можно ли как-то убрать это внутреннее расстояние? или существуют какие-либо еще неведомые мне способы. Заранее спасибо. Если выразился непонятно, напишите залью сюда код и изображение.

 

Edited November 29, 2017 by Firin

[SelenIT]

Универсально убрать это расстояние, к сожалению, нельзя. Это внутреннее расстояние резервируется для выносных элементов букв (всевозможные хвостики-завитушки у f, например) и диакритических знаков (немецкие «умляуты», французские «аксаны» и прочие родственники наших точек над Ё и «улыбки» над Й), а его точный размер зависит от конкретного шрифта и значения line-height. Для небольшого размера шрифта  можно лишь «методом тыка» подобрать необходимую поправку с приемлемой точностью. Подробнее про это расстояние и откуда оно берется — в этой статье.

[Димитрий]

Думаю, разберешься... 

https://webref.ru/course/css-basics/css-reset 
https://habrahabr.ru/post/45296/
https://htmlacademy.ru/blog/64-about-normalize-css

Edited November 29, 2017 by Димитрий

[AlexZaw]

 Если просто - то место сверху и снизу предназначено для заковырок

В вебе есть понятие высота строки (line-height). Оно же - интерлиньяж, оно же - межстрочный интервал. И текст вписывается в строки с такими вот высотами.

Вы можете задавать line-height в стилях. Например, в пикселях (24px), или в емах (1.25em), или в безразмерной величине (1.2). Задать для всех элементов (* {}), или для каких-то конкретных (h1 {}).

Если ничего не задать - будут применены высоты строк по умолчанию. В разных браузерах - разные умолчания.

[SelenIT]

26 минут назад, AlexZaw сказал:

В разных браузерах - разные умолчания

Даже не столько в разных браузерах, сколько в разных шрифтах. С поправкой на особенности отрисовки/сглаживания в той или иной платформе.

[Firin]

Тогда следующий вопрос, как поступать в подобных случаях? стоит ли с этим так сильно по пиксельно заморачиваться? и что посоветуете сделать в конкретном случае?

 

Edited November 29, 2017 by Firin

[AlexZaw]

В каждом конкретном случае может быть свое решение, с опытом придет. Заморачиваться стоит, так как могут потребовать пиксель перфект верстку. В вашем случае без кода сказать что либо сложно, но советую проверить те ли шрифты вы используете и посмотреть на высоту строки в макете, может там указана меньшая высота.

Если судить по обводке то у вас два блока. Возможно стоит сделать это через список, а линии добавить с помощью псевдоэлементов. 

[Firin]

спасибо, за ответы )