Indenting only the first line of text in a paragra

Question

I have several paragraphs that I would like to indent, although only the first lines of these paragraphs.

How would I target just the first lines using CSS or HTML?

Answer 1

Very simple using css:

p {
    text-indent:10px;
}

Will create an indentation of 10 pixels in every paragraph.

Answer 2

In addition to text-indent, you can use the :first-line selector if you wish to apply additional styles.

p:first-line {
    color:red;
}

p {
    text-indent:40px;
}

http://jsfiddle.net/Madmartigan/d4aCA/1/

Answer 3

first indent all lines (1), than outdent the first line (2)

padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */

Answer 4

Use the text-indent property.

p { 
   text-indent: 30px;
}

jsFiddle.

Answer 5

Others have mentioned the best way to implement this via CSS, however if you need a quick fix with inline formatting, simply use the following code:

<p style="text-indent: 40px">This text is indented.</p>

Source: https://www.computerhope.com/issues/ch001034.htm

Answer 6

I ran into the same issue only I had multiple <p> tags I had to work with. Using the "text-indent" property wanted to indent ALL of the <p> tags and that's not what I wanted.

I wanted to add a fancy quote image to a list of testimonials, with the css background based image at the very beginning of each quote and the text sitting to the right of the image. Since text-indent was causing all subsequent paragraphs to indent, not just the very first paragraph, I had to do a bit of a workaround. The same method applies if you aren't looking to do an image though.

I accomplished this by first adding an empty div to the beginning of the paragraph I wanted indented. Next I applied a small width and height to it to create the invisible box and finally applied a left float to make it flow inline with the text. If you are using this for an image, make sure to add a margin to the right or make your width a bit wider for some white space.

Here's an example with the CSS inline. You can easily just create a class and add it to your CSS file:

<div style="height: 25px; width: 25px; float: left;"></div>
<p>First Paragraph</p>
<p>Second Paragraph</p>