After about a year of coding, I have decided to become a writer and spread the knowledge of HTML and CSS coding around. I was given the opportunity to write for this site, so here I am and here is my first article. Hope you enjoy!

Have you ever wanted to know how to make your lines of text indented? Well this small post is going to show you the tricks on how that is done. Some may think that the code <p> is going to do the trick at separating the lines of text. Well that is one way about doing it. Some may even add non-breaking spaces to make the indent possible. Although that may work and be valid, it is not the correct way to make the indentation possible. The correct way to make the indent possible is by adding the code text-indent: 1.5em; to your CSS paragraph class.

Example of different spacing paragraphs with indentation:

#p.a {text-indent: 1.5em; margin-bottom: 0;}

#p.b {text-indent: 1.5em; margin-top: .5em;}

#p.c {text-indent: 1.5em; margin-top: 1.3em;}

HTML:

<p class=”a”>This is a paragraph that has the original spacing.</p>

<p class=”b”>This is a paragraph that has no bottom margin and a manually declared top margin.</p>

<p class=”c”>This is the final paragraph that has less spacing between than the paragraph above.</p>

In the example above, we are using indentation for all three paragraphs. The first one we have declared it having no space afterward to account for the manual space we are going to declare in the second paragraph. The second paragraph has a very small break in between the paragraphs; whereas, the third paragraph has a slightly larger break.

You can also declare the first paragraph having no indent by leaving off the indent-text declaration or setting it to 0 in the event you later want to have it indented.

Here is an alternative way of indenting paragraphs:

.indent {text-indent: 1.5em;}

#p.d, .e {margin-top: 1.6em;}

#p.d {margin-bottom: 0;}

HTML Example:

<div class=”indent”>

<p>This is a paragraph that has the original spacing.</p>

<p class=”d”>This is a paragraph that has no bottom margin and a manually declared top margin.</p>

<p class=”e”>This is the final paragraph that has less spacing between than the paragraph above.</p>

</div>

The above example provides you with the indentation needed but without having to declare the space following or beginning each paragraph (using the default spacing). With the above example you can set paragraphs different styles while also maintaining the indent and not declaring it for each style. Also notice that the class is not specific to the paragraph id thus allowing you to declare an indent to a whole group of paragraphs. We have also formatted these paragraphs with manual spacing.

Note: Use these classes only on paragraphs that you want indented. Do not use these classes to indent captions; rather set the caption of an image to center.

Categorised under: CSS, Design & Layout, Tips & Tutorials by nashultz