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).
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.
To double-space the above, set the line-height to 2. The gap between each line will then be
the font size multiplied by the number you specified, which in this case is 2. 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.
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: 1.5. And if you
want the spacing to return to its original value (before you messed with it), use line-height: normal.
The default value is not necessarily 1.0 as you may think, since for certain fonts, this results in lines
that are too close for comfortable reading. To avoid this, desktop browsers apparently use a default line height
of 1.2 or thereabouts.
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:
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: 2;">.
Copyright © 2017-2018 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/.
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.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Double-Space Text and Change the Line Spacing on a Web Page (HTML/CSS)
