HTML Code for Line Spacing Heights

Techwalla may earn compensation through affiliate links in this story.
HTML is the backbone of the internet.

Control the vertical space between the lines of text within a paragraph on your Web page to refine your visual presentation. If you need a little extra space filled with text, or need to squeeze a little extra text into a certain space, you can use HTML and CSS tags to change the line spacing to fit. With a few lines of code you can adjust the line spacing height, or "line height" in your Web page.


Strict HTML

To create line spacing that looks right, or that helps make a section of text fit perfectly inside the text area in a site, use strict HTML. Use the "font" tag to create code like this:


Video of the Day

The "150%" is the part that increases the spacing between the lines of text. Substitute other values to increase or decrease the spacing.

Span Tag

Use span tags to apply the line height change to text entered between the opening and closing of the tag. The coding looks similar:


Text goes here...

Use a number of pixels to set the font size instead of the relative sizes large, medium or small. Using precise measurements for font size gives you better control of the text and allows the line spacing to work better.


CSS Alternatives

Line spacing can also be set using a cascading style sheet (CSS). The CSS controls whatever element you decide to apply it to, be it a span ID that you set for a single section of text on the page or an entire class of commonly used items. For instance, if you are working with a blog site you could create a class for blog entries and set the stylesheet line-height for the class at 135%. Every blog entry would have the same line height. The code for setting "line height" in CSS is:



WYSIWYG Line Spacing Control

Many of these coding problems can be circumvented by using a WYSIWYG Web editor or by creating sites with online software such as WordPress and Joomla, or free website creation tools like Weebly, Wix and Moonfruit. All these tools provide text editors that take the guesswork and head-scratching away. A simple click of a mouse button and the line spacing increases just as it would if you were writing a document in your favorite word processor.


Most Web editors, no matter how WYSIWYG their interface, are much easier to use if you know how to code, even if you find you code a lot less than you used to.