font-size vs line-height vs actual height

Question

So this question says that the font-size defines the height of a box so that all letters (with ascenders and descenders) can fit.

But why has a sp

Answer 1

Introduction

Good question,

I learn most of these things through personal experience.

In this case, the DIV height is set to auto. It will detect the height of its own contents, and evaluate its new height from there.

Clearly, the DIV only takes into account the line height of the . This is likely due to the diverse number of fonts. Line-height gives us the adaptability we need for various font types.

In Short

font-size

Font size only changes the actual font itself, and not the div elements around it

line-height

Line-height is the height of the actual line and will change the div elements around it

Wait a second...

If we have something like this:

div {
  background: green;
  margin-top: 50px;
}
.test-one {
  font-size: 20px
}
.test-two {
  font-size: 40px
}

   test one 



   test one 

Clearly the size of the DIV (height: auto;) changes according to font-size. That's because the line-height will automatically adjust accordingly if it is not set manually.

One Exception

Upon further inspection, I noticed that DIVs don't always match the line-height. This occurs if the line-height is very small, and the font exceeds it by some distance.

The example you gave -

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

XxÀg


  XxÀg



  XxÀg



  XxÀg

If you look closely,

letter-span-1 and letter-span-3 both result in the DIV equaling the line-height.

However, letter-span-2 does not.

-------------- Line-height - Actual-height

letter-span-1: 40px - 40px

letter-span-2: 15px - 25px

letter-span-3: 65px - 65px

Notice that letter-span-2 is the smallest. It is so small, it will actually limit the height of the div. You can test this by altering the font size.

The "Why?"

Why have these two different settings, and not just change height normally?

I honestly am not sure, but I speculate that it was because fonts aren't standard. If the computer misreads a particular font, it may incorrectly evaluate the line-height.

Not to mention the numerous "CSS Tricks" you can do with line-height. It is great for adding space for open designs.

Conclusion

Line-height defines div height, unless line-height is very small, in which case the font-size will define the size.