Link to home
Create AccountLog in
Avatar of dlearman1
dlearman1Flag for United States of America

asked on

How to decrease the whitespace between two blocks of text

Given 2 text blocks like this

<p>First text block<br>
second line</p>
<p>Second text block<br>
second line</p>

What CSS would result in the text blocks separated by less than the default paragraph spacing without changing the line-height inside the text blocks?

I've tried using styled <hr>, which works but only to increase the spacing. I've also experimented with fractional line heights. To avoid changing the interior line-heights I've tried enclosing the first word of the second block in span tags.

I'm hoping someone has a working solution.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

You want to look at the margin style
Try the following styles to see the effect (Big margin)
p {
   margin: 50px 0;
}

Open in new window

Or small margin
p {
   margin: 5px 0;
}

Open in new window

Avatar of dlearman1

ASKER

Julian,

I believe this would change the spacing on all lines of text in a p tag, not just the first line in each paragraph.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account