CODEWITHSUNDEEP
htmlcss
Pat
Pat

Reputation: 163

CSS seperate font size and line height

I have this code,

p.quote span {
  font-size: 50px;
}
<p class="quote"><span>&ldquo;</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
  no sea takimata sanctus est Lorem ipsum dolor sit amet.<span>&rdquo;</span>
</p>

https://jsfiddle.net/ce9ej08s/

I don't want the paragraph line-height to be like 50, Is there a way to put the last line of the paragraph closer together? Like is there a way to make that quotation mark in separate element, so the size of the quotation mark doesn't change the line-height of the paragraph?

Upvotes: 0

Views: 490

Answers (3)

nikehu
nikehu

Reputation: 1

Based on the above poushy's answer,I make some changes,I hope it will help.

 p.quote span {
  font-size: 50px;
  line-height: 0px;
  vertical-align: bottom;
  display: inline-block;
  padding:15px;
}
p{
  line-height:35px;
}

jsFiddle: https://jsfiddle.net/862751557gin/0jajczjk/

Upvotes: 0

poushy
poushy

Reputation: 1134

You can use a combination of vertical-align and line height:

p.quote span {
    font-size: 50px;
    line-height: 0px;
    vertical-align: bottom;
}

This will style the quotes correctly.

jsFiddle: https://jsfiddle.net/ce9ej08s/2/

Upvotes: 1

Liftoff
Liftoff

Reputation: 25392

You can eliminate the gaps entirely by manipulating the vertical-align properties of the quotation marks.

https://jsfiddle.net/ce9ej08s/1/

Align the first quote to the bottom, which will push the baseline of the first line of text down with it, and align the second quote to the top, which will push the baseline of the last line of text up with it.

p.quote span
{
  vertical-align: bottom;
}

p.quote span.end
{
  vertical-align: top;
}

No more gaps!

Upvotes: 0

Related Questions