Indenting only the first line of text in a paragraph?

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?

Muster

@Ricardo - Unfortunately not. Marking an answer as the answer is given solely to the person who asked the question, and the powers that be have no intention of changing that. As far as they're concerned, for the sake of others coming across the question, that's what the voting system is for (with the top-voted answer being the "community choice" one, basically). – Limerick

Why don't you accept an answer? There are several good ones here. – Borras

Answer 1

Use the text-indent property.

p { 
   text-indent: 30px;
}

jsFiddle.

Maximilien

I get really sad when I see an answer here on Stackoverflwo that helps me, but the OP didn't accept it... sorry, bro. You deserved it. – Prevenient

Seems that the user stopped using S.E. less than a month after this was asked or disappeared. – Fossiliferous

@Prevenient the accepted answer should be the one with the most upvotes because it helps the majority and not just OP – Liquidambar

@Prevenient The accepted answer is good with the OP choice. Why sad? It's not that important. The important thing is the answer is upvoted, to make it clear to everyone it's a good and useful answer. – Tarpon

text-indent is correct here, however, 30px is not. That is an arbitrary value to use. The standardized value for tab is the width of 8 characters. This is probably too large for use on the web, and often the case becomes 4 spaces or 1 tab (insert meme here). In any event, whether you chose 4 or 8 spaces, you should be using the <length> data type ch. That would equate to text-indent: 4ch or text-indent: 8ch. – Tomekatomes

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/

Fifteen

Answer 3

Very simple using css:

p {
    text-indent:10px;
}

Will create an indentation of 10 pixels in every paragraph.

Outwardbound

Answer 4

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

Hann

This is identical to the accepted answer, except adding the bad practice of inlining style in HTML tags... – Maryjomaryl

@Jean-FrançoisCorbett It's necessary in some situations. – Bendwise

Answer 5

I was also having a problem getting the first line of a paragraph (only the first line) to indent and was trying the following code:

p::first-line { text-indent: 30px; }

This did not work. So, I created a class in my CSS and used it in my html as follows:

in CSS:

.indent { text-indent: 30px; }

in html:

<p class="indent"> paragraph text </p>

This worked like a charm. I still don't know why the first code example did not work and I did make sure that the text was not aligned.

Orthopedics

The first one doesn’t work because ::first-line is a pseudo-element on which only a subset of CSS-properties can be applied. text-indent is not one of them. See developer.mozilla.org/en-US/docs/Web/CSS/::first-line – Caeoma

Answer 6

Here you go:

p:first-line {
    text-indent:30px;
}

Didn't see a clear answer for a CSS newbie, so here's an easy one.

Cystine

:first-line doesn’t work, because the text-indent-property has no effect on it. Without the pseudo-element for p, there’s no problem. The text-indent-property does only intend the first line anyway. So there’s no reason to target only one line in the first place. See also: developer.mozilla.org/en-US/docs/Web/CSS/::first-line and developer.mozilla.org/en-US/docs/Web/CSS/text-indent – Caeoma

Answer 7

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

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

Rumba

That's for the other lines. For the first line, use just text-indent. – Smothers

Answer 8

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>

Vestryman