Indenting text in html

How do you indent text / paragraphs in html? I have compiled a short list of several way to do this.

Cascading Style Sheets

Using CSS, you can set all your paragraphs in a document to be indented however much you want.

<style>
<!--
p { text-indent : 10px; }
-->
</style>

Or you can add style=”text-indent : 10px;” to the P tag for that paragraph if you only want it in one spot.
<p style="text-indent : 10px;">paragraph to be indented</p>

Or put the line you want indented in inside a div tag
<div style="text-indent : 10px;">Text to be indented</div>

Don’t forget to close your p or div tags. ;-)

This is the best way to indent paragraphs, as it separates style from content and is widely supported on modern browsers.

Non-Breaking Space

The non-breaking space special character can be used to move text and images over slightly on a Web page.

<p>
&nbsp;&nbsp;&nbsp;&nbsp; Paragraph starts here....
</p>

Some browsers don’t like multiple non-breaking spaces in a row. They might crash, or probably just ignore them.

And make sure to save a baseline! :-)


Be Sociable, Share!
Tagged with: , , ,
Posted in ProStores Tips & Tutorials

Leave a Reply