CODEWITHSUNDEEP
htmlcsswordpress
user1488639
user1488639

Reputation: 115

Issue with line-height within a paragraph

I am using WordPress and applying a class to a section of post text.

Here is my post text 

<p>
    <span class="disclaimer">A really long line of text that covers more than one line.</span>
</p>

Here is my CSS

p > .disclaimer {
    font-size: 50%;
    line-height: 50%;
}

Here is my issue:
The font becomes 50% smaller but the line-height does not. No matter what value I input for line-height it will not size properly. The text shows huge spacing when the line wraps around.

Upvotes: 0

Views: 402

Answers (3)

gmanousaridis
gmanousaridis

Reputation: 373

line-height works differently for inline elements than it does for block elements.

Try display: block; in your span's css, or if you need to use the span as inlined element you can reference here

Upvotes: 1

Pete
Pete

Reputation: 58432

You need to put the line-height on the p rather than the span:

p {
  line-height: 50%;
  width:100px; /* for example only*/
}
.disclaimer {
  font-size: 50%;
}
<p><span class="disclaimer">A really long line of text that covers more than one line.</span></p>

Upvotes: 4

m0riarty
m0riarty

Reputation: 41

try

p > .disclaimer {
font-size: 50%;
line-height: 50%;
display:block;}

Upvotes: 1

Related Questions