How to Double-Space Text (HTML/CSS)

and change the amount of space between lines


How to Double-Space Text and Change the Line Spacing on a Web Page (HTML/CSS)

by Christopher Heng, thesitewizard.com

One of my visitors wanted to double-space the lines on his web page, that is, to put an empty line between each line of text. This article answers that question, describing how to increase or decrease the gap between lines, using Cascading Style Sheets (CSS).

How to Increase or Decrease Line Spacing

On a web page, the CSS property that controls the amount of space between each line of text is line-height. You will have to change this property on the block (eg, paragraph) that contains your text.

Let's say that you have a paragraph coded in HTML as follows.

<p class="demopara">
Some lecturers require that the gap between lines in an academic paper be wider than the default. For example, they may stipulate that your text be double-spaced. Or they may say that the line spacing has to be set to 1.5.
</p>

To double-space the above, set the line-height to 200%, that is, twice the default of 100%. Since I gave the paragraph a class of "demopara", I can change the line height for all members of that class using the code below.

.demopara {
  line-height: 200% ;
}

The text will appear like this:

Some lecturers require that the gap between lines in an academic paper be wider than the default. For example, they may stipulate that your text be double-spaced. Or they may say that the line spacing has to be set to 1.5.

Note that for the above example text, I also added a border to the paragraph and restricted its width, so that there will be multiple lines even if you are reading this on a wide screen. Otherwise I will have to come up with even more dummy text just so that there are enough lines for the double-spacing effect to be visible.

Those who need the line spacing to be set to 1.5 should use line-height: 150%. And if for some reason that you need to reduce the space between lines, you can give line-height a value less than 100%. As mentioned above, 100% is the default. Any number above that increases the gap, and a lower value reduces it.

Incidentally, if you want all the paragraphs on your page to use that same double-spacing (or 1.5 spacing, or whatever), there's no need to give your paragraphs a class like "demopara" just for this purpose. Set the line-height property directly on the p selector to affect them all, like so:

p {
  line-height: 200% ;
}

If you don't have easy access to your style sheet or the <head> section of your web page to add the CSS rules, and you only need to double-space one paragraph, you can add the line height rule to the paragraph tag itself. That is, change the opening <p> tag so that it now says <p style="line-height: 200%;">.

Copyright © 2017 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 to Double-Space Text and Change the Line Spacing on a Web Page (HTML/CSS)





Home
Donate
Contact
Link to Us
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.