[Webinar] Streamline your web hosting managementRegister Today

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1009
  • Last Modified:

Indent Entire Paragraph

Ok I would have thought I'd be able to figure this one out but I can't, and I'm pressed for time.

I have a class called text1, which specifies the font, basically, of paragraphs of text on my page.  I want the entire paragraph indented about 10 spaces - not just the first line, which is what happens if I play with the text-indent OR the left margin values.

Here is my code.  Can someone help?

.text1 {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 9pt;
      font-style: normal;
      font-weight: normal;
      color: #000000;
1 Solution
Using either padding-left or margin-left should work.  If they don't, you have some other problem, like you're not applying the style to the whole paragraph, or there's another style overriding it somehow.  Here's a working example (tested in IE6):

.text1 {
     margin-left: 10ex;

<p>Not indented: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In augue
libero, sagittis nec, semper a, sodales sit amet, sem. Praesent quam. Donec magna
urna, malesuada eget, condimentum eu, varius vel, enim.</p>

<p class='text1'>Indented: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
In augue libero, sagittis nec, semper a, sodales sit amet, sem. Praesent quam. Donec
magna urna, malesuada eget, condimentum eu, varius vel, enim.</p>
velcrobotsAuthor Commented:
OK, i understand - and apparently i had it correct.  i think my problem is more with how i'm implementing.  let me elaborate:

I'm using dreamweaver.  I type the text "header1" and then hit Shift-Enter (a <br> tag).  Then I type the text "header2" and do the same.  Then I type my text1.  After all that i go back and highlight the different lines and apply the styles.  The first one seems to work, but when I highlight the text at the bottom, and select the "text1" style, it changes the line above (header2) it as well.  I know it has something to do with the "span" tag dreamweaver is putting this into.  I guess it's treating the whole block of text as one, even though there is a line break?

It works if I hit regualr enter - just a <p>.  But then the space between lines is too large.  

This is very frustrating.
This is the dillema when you let a software package do some or all of the work for you.  It does specific things well, and anything else it's ten times harder to do right.  You're certainly right that dreamweaver is doing it.
Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Dreamweaver is making a bodge of it.  It shouldn't be wrapping multiple lines in a <span>.  Get rid of that span and use <p>s, then reduce the amount of space introduced by a <p>.  You can do that by setting the padding-top, padding-bottom, margin-top and margin-bottom values for <p>, or for a custom style that you apply to your <p>s.
Hi velcrobots,

What you're seeing is the correct behaviour - so Dreamweaver is getting it right in fact.

This is a paragraph:
<p>This is text</p>

This is "not" a paragraph:

more text<br> etc.

so you cannot apply the "text1" style to the above and have it act as a paragraph. Only text contained within <p></p> tags is a paragraph.

Using <br> or Shift-Enter is really not a good way to create space, escpecially if you're dealing with large blocks of text, because where the line wraps on your machine may not be where it wraps on someone elses.

As to the spacing when inserting mulitple p tags - this is controlled with CSS. So, first you do this:

p.text1 { margin:5px 0 5px 10px } which reduces the top and bottom margin, and indents the left margin.

Now you create the paragraphs on the page, and apply the text1 style to all of them. The big gap you're seeing between paragraphs will be reduced.

If you prefer this behaviour for all the <p> tags on your page. but only want to indent some of them, then you do this:

/* reduce the vertical spacing on all <p> tags */
p { margin:5px 0; }

/* indent my custom paragraphs */
p.text1 { margin-left:10px; }

Does that make sense?

velcrobotsAuthor Commented:
Worked perfectly.  Thank you very much.

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now