CODEWITHSUNDEEP
htmlcss
RSM
RSM

Reputation: 15108

CSS line-height alignment issues

I am designing a website, with a quote on every page. I am applying CSS to this quote to make it look the best it can and stand out. However I am having a couple of issues.

.quote {
  font-size: 18pt;
  padding-top: 50px;
  padding-bottom: 15px;
  text-align: center;
  line-height: 0.25;
}

.speech_mark_large {
  color: #203D69;
  font-size: 120px;
  vertical-align: top;
}
<div class="quote">
  <span class="speech_mark_large">&ldquo;</span> Leading the way with innovative design of corrugated Point of Sale displays and packaging offering bespoke design to fulfill your brief.
  <span class="speech_mark_large">&rdquo;</span>
</div>

Also on JSFiddle.

I want the two lines of the quote to be closer together, but when I apply a line height, to solve this, it pushes the speech marks up into the previous line. How do I solve this?

Upvotes: 1

Views: 15468

Answers (2)

huysentruitw
huysentruitw

Reputation: 28091

You should set the line-height on the complete .quote element. Next you set vertical-align to top for the inner .speech_mark_large element. By changing the line-height of the .quote element you can tune the line spacing to what you think looks the best.

EDIT: I have added top and position to .speech_mark_large so you can change the vertical position of the quotes.

CSS

.quote {
    font-size:18pt;
    padding-top:15px;
    padding-bottom:15px;
    text-align: center;
    line-height: 30px;
}
.speech_mark_large {
    color:#203D69;
    font-size:50pt;
    vertical-align: top;
    top: 5px;
    position: relative;
}

See this updated JSFiddle

Upvotes: 5

Rodik
Rodik

Reputation: 4092

try this:

.speech_mark_large {
color:#203D69;
font-size:50pt;
line-height: 35px;
vertical-align:text-top;
}​

line height will make them take up less space from the inline text height (which in-turn makes them float over your other text). The vertical-align will fix this by telling the quotes to align themselves to the text's bottom, rather than normally.

Upvotes: 0

Related Questions