How do I Increase/Decrease the Space Between Paragraphs on a Web Page (CSS)

And how to prevent the distance between paragraphs from growing when double-spacing


How do I Increase/Decrease the Space Between Paragraphs on a Web Page (CSS)

by Christopher Heng, thesitewizard.com

One of my visitors wanted to know if there was a way to change the distance between the paragraphs on his web page. This article answers that question.

He also had a particular application in mind. He had previously read How to Double-Space Text but found that when he changed the line spacing, the gap between paragraphs also increased, which he did not want. I will also address this specifically.

Preamble

This tutorial requires you to have a bit of HTML and CSS knowledge. You do not need to be an expert, but, at minimum, you should know how to insert CSS rules.

Changing the Distance Between Paragraphs

Web browsers set a default amount of space between paragraphs. The exact value probably varies between browsers, since it is not guaranteed by the HTML specification, but the distance appears to be set using the margin property.

For example, the sample style sheet for HTML 4 from the W3 Consortium (which browser vendors are not obligated to follow since it's just an example) sets the top and bottom margins to 1.12em. A browser implementing this will therefore have a gap of 1.12em between paragraphs.

If you are deeply curious about how your browser actually implements this, one way to find out is to use it to open any web page that has multiple paragraphs, fire up its web developer tool, and check the values given for the margins, borders and padding of each paragraph.

For example, when I tried this with Firefox (using "Tools | Web Developer | Inspector"), I found that it sets the margin before and after each paragraph to a number that is equal to the font size, while leaving the size of the border and padding at zero. This suggests that for Firefox, the default style for each paragraph, where the top and bottom margins are concerned, is effectively the following:

p {
  margin-top: 1em ;
  margin-bottom: 1em ;
}

For those wondering why I said "1em" when Firefox's developer tool gives a number in pixels, I found that the latter number invariably matches the font size. (Try changing the font size of the page, and you will find that the number of pixels for the margin changes to match.) Since the size of a font is by definition 1em, and the margin is pegged to it, it implies that the top and bottom margins are set to 1em.

In addition, if you are not familiar with how CSS handles margins for adjacent paragraphs, I should also explain that the above rules do not mean that you get a space of 2em between them, where the bottom margin of the first paragraph gets added to the top margin of the second. Instead, the margins overlap each other (or "collapse" in technical parlance), leaving behind a distance that is equal to the larger of the two. In the case above, since both margins measure 1em, they overlap each other perfectly, and the resulting gap between paragraphs is 1em.

Changing the space between paragraphs is thus a matter of altering the top and bottom margins. For example, to increase the gap to 2em, add this to your style sheet:

p {
  margin-top: 2em ;
  margin-bottom: 2em ;
}

You can of course change 2em to whatever number that suits your purpose.

How to Prevent the Gap Between Paragraphs from Increasing When Changing the Line Height

With the above in mind, it should be trivial to solve the "problem" that my visitor was facing. In his case, he used the following CSS rule to double-space the text:

p {
  line-height: 2 ;
}

Applied to a block of demo text, the results look something like this:

These two paragraphs are here for the sole purpose of demonstrating the effect that line-height has on the spacing between them.

Notice that the gap between paragraphs is wider than that between the lines within each paragraph.

Since each line has a line-height of 2, the last line of the first paragraph has additional space following it and the first line of the second has some extra space above it. Add this to the default gap between paragraphs and you get the results you see above.

While this looks acceptable, since the typical way on the Internet of showing a new paragraph is to have some additional space before it, there may be situations where you don't want the spacing to be any different from that between individual lines. If so, simply set the top and bottom margins to 0.

p {
  line-height: 2 ;
  margin-top: 0 ;
  margin-bottom: 0 ;
}

If you do this, and find that it is hard to see where one paragraph ends and another begins, one solution is to indent the first line of each paragraph. The property to use for this is text-indent.

p {
  line-height: 2 ;
  margin-top: 0 ;
  margin-bottom: 0 ;
  text-indent: 22px ;
}

The result is as follows:

These two paragraphs are here for the purpose of demonstrating how line-height and margins affect the spacing between them.

The gap between paragraphs should now be identical to that between each line.

If you don't like what you see, feel free to change the margins to some other number. Just experiment with different values till you get the desired effect.

Copyright © 2019 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How do I Increase/Decrease the Space Between Paragraphs on a Web Page (CSS)





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.