Indent Your Paragraphs

Personally, I don't care for indented paragraphs - though I know some who like this.

I think that justifying all lines in my posts, straight to the left margin, makes for a cleaner look. And, I separate each paragraph with hard line breaks, not "<p> ... </p>", which makes typing my posts faster - though that does complicate things a bit, by requiring that I use the "Convert line breaks" setting.

Not everybody agrees with my viewpoint, which is normal for the blogosphere. Some folks like indented paragraphs. And from them, we see the occasional query

I put blank spaces at the front of my paragraphs, and that looks fine in Preview mode. But the published blog shows no indents. Why?

And the immediate answer is

Preview mode, and the published blog, will always differ.

To properly indent your paragraphs, you first have to setup a CSS attribute for paragraph indentation, in the proper rule set.

Look in the HTML for your blog.

.post p {
  margin:0 0 .75em;
  line-height:1.6em;
}

and add a "text-indent" attribute.

.post p {
  margin:0 0 .75em;
  line-height:1.6em;
  text-indent:4em;
}

Next, if you are using "Edit HTML" mode, each paragraph has to be explicitly defined. If you don't explicitly define a paragraph, the paragraph rule set has no effect. Of course, if you explicitly define paragraphs, and you do not add the CSS attribute, your paragraphs won't be indented either.

<p>Next, if you are using "Edit HTML" mode, each paragraph has to be explicitly defined.  If you don't explicitly define a paragraph, the rule setup above has no effect..  Of course, if you explicitly define paragraphs, and you do not add the CSS rule, your paragraphs won't be indented either.</p>

---

Note that if you are examining the code behind the above example, you'll note that I had to cheat a bit, since I do not normally indent my paragraphs.

---

Another way to create indented paragraphs is to enclose each logical paragraph in "<div style="text-indent:4em;"> ... "</div>" tags. This lets you type paragraphs using hard line breaks, as I mentioned above. Of course, explicitly defining paragraphs that way will get monotonous after a while.

<div style="text-indent:4em;">Another way to create indented paragraphs is to enclose each logical paragraph in "<div style="text-indent:12px;">" ... "</div>" tags.  This lets you type paragraphs using hard line breaks, as I mentioned above.  Of course, explicitly defining paragraphs that way will get monotonous after a while.</div>

If you like, you can indent a negative amount. This will create a hanging indent effect. To see this effectively, we will have to insert a bit of "Lorem Ipsum" content, courtesy of WikiPedia. Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? Do you see the extra attribute "padding-left:4em;"? You need that, to keep the first line from simply being chopped off at the left.

<div style="text-indent:-4em; padding-left:4em;">If you like, you can indent a negative amount.  This will create a hanging indent effect.  To see this effectively, we will have to insert a bit of "Lorem Ipsum" content, courtesy of WikiPedia.  Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?  Do you see the extra attribute "padding-left:4em;"?  You need that, to keep the first line from simply being chopped off at the left.</div>

That should suggest a few possibilities, anyway.