Why Can't I Decrease The Line-Height of This Text

Why can't I decrease the line-height of this text?

Because the em tag is inline and its line-height cannot be lower than its parent div.

For example, if you set the line-height of the parent to 10px, then you would be able to decrease the line-height of em tag to 10px as well.

Bootstrap, I can't reduce the line-height less than a certain amount

That is because the span element is an inline element that provides no changes when line height is applied on it.
You should rather wrap up the text in p or paragraph tag to make the line height work effectively.

Line-height doesn't change relatively (based on the size of its parent div)

Unitless values: use this number multiplied
by the element's font size

line-height: 1.5;

so it will be 150% of your elements font-size and will increase if you increase the font-size but while using px the line height will stay 30px even if you increase the font size of your element.

Why does HTML5 ignore line-height smaller than font-size?

Your <a> tag is an inline element and it appears in HTML5 inline elements defer to its parent 'block' element's line-height ( or all the way up to the <body> style if that is the immediate parent ).

Example:

body { line-height:20px; } 
a { line-height:12px; }

and this markup:

<body>
    <a href="#">test</a>
</body>

The <a> tag will have a line-height of 20px not 12px.

So your 'inline' <a style="line-height:12px;" href="#">something</a> didn't work but did when you wrapped it in the 'block'-level <div> element because block elements can dictate line-height.

A better way than bloating your markup by wrapping your inline element in a block element, just use CSS to make the tag display 'inline-block'.

<a style="display:inline-block; line-height:12px;" href="#">something</a>

Even better, give your <a> a class (change 'xx' below to something semantic):

<a class="xx" href="#">something</a>

Then in your CSS file set that class to 'inline-block':

.xx { display:inline-block; line-height:12px; }

Hope that helps.

CSS: reducing line spacing of text?

Inline elements don't honour properties such as line-height; they take on the line height of the nearest block parent.

See Fiddle

Solution: remove the line-height from the body, or turn the span into a block (i.e. make it a div; don't give display:block to the span).

Text input on Chrome: line-height seems to have a minimum

I think I've done it!!!

In my testing it seems that line-height must be at least ~115% of font-size, so if you want 50px high element you must have ~43px for things to all line up:

Fig 1. Font-size 86% of 50px line-height.

Fig 1. Font-size 86% of 50px line-height. Things line up but are not honouring the 50px font size requested by OP.

input, span {    border: 2px solid red;    display: inline-block;    font: 43px Arial;    line-height: 50px;    padding: 0;    vertical-align: middle; width: 100px;    outline-style:none;    box-shadow:none;    overflow:hidden;    /* optional - to include the borders in the element size:     box-sizing:border-box;    */}

<input type="text" value="Text"><input type="text" placeholder="Text"><span>Text</span>

Can specific text character change the line height?

My question is which behavior is the correct one.

All of them are correct because we don't have the same default font in all browsers and it's also different depending on the OS.

Is specific character allowed to change line height (I thought it was only supposed to be font dependent)?

Character doesn't change line-height. To be more accurate, line-height is a property that can only be changed by setting line-height but you are probably confusing with the line box that is defined by the line-height and a character alone cannot change it.

Shouldn't line-height: 1 imply it can fit exactly any text?

Not necessarely, line-height:1 means that the line box will be equal to the 1xfont-size ¹ but is the font designed to include all the character inside this space? Probably most of them will do but we don't know.

Basically, you have two things to consider. The content area that is defined by the font properties and the line box that is defined by the line-height. We have no control over the first one and we can only control the second one.

Here is a basic example to illustrate:

span { background:red; color:#fff; font-size:20px; font-family:monospace;}
body { margin:10px 0; border-top:1px solid; border-bottom:1px solid; animation:change 2s linear infinite alternate;}
@keyframes change {  from {    line-height:0.2  }    to {    line-height:2  }}

<span >blah_blah</span>

Why Can't I Decrease The Line-Height of This Text