73

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?

alex
  • 479,566
  • 201
  • 878
  • 984
Miles Henrichs
  • 2,300
  • 3
  • 20
  • 23
  • 3
    @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). – Shauna Feb 12 '13 at 21:06
  • 2
    Why don't you accept an answer? There are several good ones here. – jeremyjjbrown Jan 27 '14 at 05:41

8 Answers8

191

Use the text-indent property.

p { 
   text-indent: 30px;
}

jsFiddle.

alex
  • 479,566
  • 201
  • 878
  • 984
  • 33
    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. – paulotorrens Nov 26 '13 at 18:42
  • Seems that the user stopped using S.E. less than a month after this was asked or disappeared. – MicroMachine Jan 27 '17 at 20:28
  • @paulotorrens the accepted answer should be the one with the most upvotes because it helps the majority and not just OP – Kellen Stuart Aug 30 '18 at 19:52
  • 2
    @paulotorrens 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. – Quidam May 31 '19 at 03:51
  • 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 [`` data type](https://developer.mozilla.org/en-US/docs/Web/CSS/length) `ch`. That would equate to `text-indent: 4ch` or `text-indent: 8ch`. – Travis J Apr 07 '23 at 22:11
37

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/

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
14

Very simple using css:

p {
    text-indent:10px;
}

Will create an indentation of 10 pixels in every paragraph.

Shay Ben Moshe
  • 1,298
  • 3
  • 12
  • 27
8

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

Ibrahim Conway
  • 91
  • 1
  • 3
6

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.

Wayne
  • 69
  • 1
  • 2
  • 5
    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 https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line – Erik Jun 19 '15 at 11:22
2

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.

alex
  • 479,566
  • 201
  • 878
  • 984
PaulBGD
  • 2,018
  • 5
  • 22
  • 30
  • 4
    `: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: https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line and https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent – Erik Jun 19 '15 at 11:26
-1

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

padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */
Aromapark Media
  • 37
-3

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>
Phil
  • 1