Why Would The Height Increase with a Smaller Font Size

Why would the height increase with a smaller font size?

The height of the .lorem, .ipsum, .dolor, and .sit boxes is each the height of the single line box that they contain.

The height of each line box is the maximum of the height above the baseline + the maximum height below the baseline of the strut of the line and the text in the line. since the strut and the text are aligned on the baseline.

For clarity, heights below in em, refer to the font size of the overall container (i.e. the body element)

In .ipsum, (where the font size is 1em) the height above the baseline is 1em (the upper half-leading) + 13/16em (the ascender, approx) for both the strut and the text, and the height below the baseline is 1em (the half-leading) + 3/16em (the descender, approx) + 1em (the lower half-leading) making a total of 3em.

In .sit (where the font size is 0.6em) the height above the baseline is the maximum of [1em (the upper half-leading) + 13/16em (the ascender, approx) for the strut] and [1.2em (the upper half-leading) + 0.6 x 13/16em (the ascender, approx) for the text], and the height below the baseline is the maximum of [1em (the lower half-leading) + 3/16em (the descender, approx) for the strut] and [1.2em (the lower half-leading) + 0.6 x 3/16em (the descender, approx) for the text].

Evaluating that and converting to decimal gives 1.8125em above the baseline and 1.3125em below the baseline making a total of 3.125em, which is larger that the 3em of .ipsum.

Why is changing the font size also changing the height of the div?

Your div element with the text is set to display: table-cell. This means that the element has vertical-align: baseline, by default.

When you change the font size, this shifts the baseline of the text div within the container. That, I believe, is the reason for the shifting size of the box: The baseline is jumping around.

To prevent the re-sizing, set the vertical-align property to something else.

Try vertical-align: middle.

jsFiddle

font-size vs line-height vs actual height

First, I recommend reading my answer in Inline elements and line-height. To summarize, there are various heights related to inline boxes:

• Height of the inline box, given by line-height
• Height of the line box, which in simple cases is also given by line-height, but not here.
• Height of the content area of the inline box, which is implementation dependent. This is the area painted by the red background.

The other height in your case is the height of the parent div. This is determined by §10.6.3. In this case, since the box establishes an inline formatting context with one line,

The element's height is the distance from its top content edge to [...] the bottom edge of the last line box

So the height of the parent block is given by the height of the line box.

What happens here is that the height of the line box is not the line-height of your inline box. And that's because the line-height of the parent block is also taken into account:

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element.

The minimum height consists of a minimum height
above the baseline and a minimum depth below it, exactly as if each
line box starts with a zero-width inline box with the element's font
and line height properties.

We call that imaginary box a "strut."

If you set parent's line-height to 0, and child's vertical-align to e.g top, then the height of the parent will exactly be the line-height of the child.

.outer {  margin-top: 50px;  background-color: green;  width: 150px;  font-family: "Times New Roman";  line-height: 0;}.letter-span-1 {  background-color: red;  line-height: 40px;  font-size: 40px;  vertical-align: top;}.letter-span-2 {  background-color: red;  line-height: 15px;  font-size: 40px;  vertical-align: top;}.letter-span-3 {  background-color: red;  line-height: 65px;  font-size: 40px;  vertical-align: top;}

<span class="letter-span-1">XxÀg</span><div class="outer">  <span class="letter-span-1">XxÀg</span></div>The parent block is 40px tall.<div class="outer">  <span class="letter-span-2">XxAg</span></div>The parent block is 15px tall.<div class="outer">  <span class="letter-span-3">XxÀg</span></div>The parent block is 65px tall.

Why does reducing the font-size of a SPAN element inside a paragraph increase the height of the paragraph?

As to "Why" it Happens

According to W3C (bold emphasis added),

'line-height' specifies the minimal height of line boxes within the
element. The minimum height consists of a minimum height above the
baseline and a minimum depth below it ... The height and depth of the font above
and below the baseline are assumed to be metrics that are contained in the font.

So what this tells me is that

1) the line-height can go taller if need be (it is just a minimum), and

2) your shrinking of the font would seem to be shifting how the font applies the minimum above and below the baseline of the span for the line-height: 38px. Apparently the smaller font size redistributes more spacing below the baseline of the smaller font, pushing the p tag taller. This seems confirmed in that if you add to the span a vertical-align: top as I did here, then the baseline shifts up for the smaller font, and no size change occurs in the p tag.

Change font height and width

CSS transform has the scale function for this:

p {
  display: inline-block;
  font-size: 32px;
  transform: scale(.5, 1);
}

<p>This is text.</p>

Change font-size without affecting div parent height

The tileText is actually the container in which you've got your text. so add the max-height: 5rem; to .tileText{} and Voila! problem solved:

.tileText {
  ...
  ...
  max-height: 5rem;
}

or you can specify the .tileText height in another unit like rem rather than percentages.

.tileText {
...
...
height: 10rem;
}

How to make button heights the same with different font sizes

The reason that both <button> elements are different sizes is because you're defining the height in terms of the relative em unit of size, which is determined from the current font-size, and both <button> elements have different font-size.

While you say you "have to use em for…responsive sizing you can, instead, use the rem unit, which is the 'root-em' of the document, one rem will always be the same size regardless of the changed font-size of any descendant element.

For example:

let button1 = document.querySelector('button.btn'),  button2 = document.querySelector('button.btn2');
console.log(button1.clientHeight, button2.clientHeight);// 60 60 (in my browser, yours will vary, but both// buttons should show the same size).

body {  font-size: 16px;  box-sizing: border-box;}
.btn {  height: 4rem;  line-height: 4rem;  font-size: 1em;}
.btn2 {  height: 4rem;  line-height: 4rem;  font-size: 1.50em;}

<button class="btn">First Button is 32px as expected</button><br /><br /><button class="btn2">Why this is not same height with first one?</button>
<p>  How to make same height buttons with differnet font sizes ?</p>

---

Related Topics