删除大写标题周围的空格

Question

I have a title which is displayed in uppercase letters. I would like to have just 2 pixels between this title and the framed box below.

If the text contains lowercase letters like 'g', there is no space below, but once all 'g', 'y' and 'j' letters are gone, it appears.

Is there any cross-browser method of getting rid of that space? Apparently browsers display different amount of empty space: https://jsfiddle.net/5o94va6p/13/ , so tricks like line-height: 0.7 work in Firefox but eat too much space in Safari.

Answer 1

Safari and chrome look similar in terms of empty space. The browser that looks different is Firefox. I would only specify line height for it using CSS. This way, Firefox will look good, and it will not effect the look in other browsers.

Try this code which will target only Firefox:

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

Answer 2

try using this -

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

Answer 3

The space below the baseline which is needed for letter like y, g, p etc. is ALWAYS there, it's part of the line-height - this is the reason for your problem. You can't change that unless you define a negative margin-bottom value, like

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