Question

I was just playing around with the line-height property in CSS. I discovered that if I set the line-height to 0.1 for two identical lines then both of them combine very nicely. This is what I did

<!DOCTYPE html>
<html>
<head>
<style>
p.effect {
    line-height: 0.1;
}
</style>
</head>
<body>
<p class="effect">
This is a paragraph with a special line-height.<br>
This is a paragraph with a special line-height.<br>
</p>
<p> This is a normal paragraph.<br>
This is a normal paragraph</p>
</body>
</html>

The line This is a paragraph with a special line-height looks very nice. My question is:

Is this effect given some name? Like xyz font or xyz effect in CSS?

Answer 1

.short {
  line-height: 0.3;
}
p {
  text-shadow: 4px 10px 0px rgba(159, 150, 150, 1);
}

<pre class="short">
How the hell is this nice?
This is such a bad sample to create shadow like effect.
But, why would one create a shadow effect by using line-height?
CSS3 now supports text-shadow property where you can have a nice shadow lurking around your text.
This is totally messed up.
I am even using .3 for this height and you're still reading the source to understand what I am saying.
Look below paragraph with a shadow effect.
</pre>
<p>
Isn't this much cooler?
</p>

Answer 2

interesting point - the term "leading" derives from the old printers practise of spacing the lines of text in printing blocks with lead spacers, so is pronounced as "ledding" rather than "leeding" (which some people think is the correct term - as is leading the text with spacing).

What is this effect of setting line-height in css called?

2 个答案: