Удалите место вокруг заголовка верхнего регистра

Question

У меня есть заголовок, который отображается заглавными буквами. Я хотел бы иметь всего 2 пикселя между этим заголовком и рамкой ниже.

Если текст содержит буквы нижнего регистра, такие как «g», нет места внизу, но после того, как все буквы «g», «y» и «j» исчезнут, оно появляется.

Есть ли кросс-браузерный метод избавления от этого пространства? По-видимому, браузеры отображают различное количество пустого места: https://jsfiddle.net/5o94va6p/13/, поэтому трюки вроде line-height: 0.7 работают в Firefox, но едят слишком много места в Safari.

Answer 1

Сафари и хром выглядят одинаково с точки зрения пустого пространства. Браузер, который выглядит по-другому, - это Firefox. Я бы только указал высоту строки для него с помощью CSS. Таким образом, Firefox будет выглядеть хорошо, и это не повлияет на внешний вид в других браузерах.

Попробуйте этот код, который будет предназначаться только Firefox:

@-moz-document url-prefix() { 
    h1 { 
     line-height: 0.7 
    } 
} 

Answer 2

попробовать использовать это -

.box{ 
    margin-top: 2px; 
    position: fixed; 
} 

Answer 3

пространство ниже базовой линии, которая необходима для письма, как у, г, р и т.д. является ВСЕГДА там, это часть линии-высоты - это причина вашей проблемы. Вы не можете изменить это, если вы не определяете отрицательное значение нижнего предела, например

.my_heading { 
    margin-bottom: -4px; 
}