Novel Paragraph Spacing with CSS

You have seen this technique used in printed novels and books countless times. The paragraphs are single spaced together instead of double-spaced apart. So how do you get this effect on your web pages? Glad you asked because in this article we explain how easy this effect is to accomplish with the magic of CSS.

I should caution you though that this effect can be difficult for some folks to read on a computer screen. So use it wisely and sparingly.

Because you do not want all of your website's page paragraphs to have this effect, create a custom CSS class like the one below. This code should be placed within your external style sheet. If you are not familiar with the different methods of CSS and how or when to use them, be sure to read our article, "External, Internal or Inline? Which Method is Best?"

.single { text-indent: 25px; margin-bottom: 0; margin-top: 0; }

You can edit the text-index property to however many pixels you want your paragraphs indented. The key properties that render the paragraphs single-spaced are the margin-bottom and margin-top properties which are set to zero.

Now assign the custom class "single" to paragraphs in your web pages that you want single spaced. The HTML source code would look like this:

<p class="single">Your paragraphs in this area.</p>

If you want to get even more creative, you can justify your page text so that is resembles the page text of a newspaper. Again, use this effect sparingly as there are major down sides to using this effect on your entire web site.

If you want your custom class "single" to be justified, add the text-align property to the custom class we previously created as shown below:

.single { text-indent: 25px; margin-bottom: 0; margin-top: 0; text-align: justify; }

Click Here to view live comparison examples of both effects and see first hand why you should use these effects with discretion.

Related Article:
Newspaper Column Effect: Justified Page Text