How to set indent the second line of paragraph using CSS ?

23 Apr, 2020
There are several methods to indent the second line of the paragraph that can be achieved in many ways. Some of the methods to achieve this are described below with proper code and output. Now some styling can be done using CSS in various ways to indent the second line as per need.
Note: By default, when lines wrap, they just start right below where the previous line started. Take a look at the following to see this in action:
Syntax:
/* length values */
text-indent: 3mm;
text-indent: 40px;

/* percentage value
relative to the containing block width */
text-indent: 15%;

/* Keyword values */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* Global values */
text-indent: inherit;
text-indent: initial;
text-indent: unset;
<Method 1: In this example, the first line of text is not indented, but subsequent lines from the second line are indented so the first line does not move. It is achieved in this example by setting the text-indent to -36px and padding-left value to 36px. In this example, the beginning div tag contains the following styling information as attributes.
Example:
<!DOCTYPE html><html>  <head>    <title>        Set indent in second line of paragraph    </title>      <meta name="viewport" content=        "width=device-width, initial-scale=1.0" />      <style>        h2 {            text-align: center;        }          div.a {            text-indent: -36px;            padding-left: 36px;        }    </style></head>  <body>    <h2><u>GEEKS FOR GEEKS</u></h2>      <div class="a">        <p>            He started with <a href="https://www.geeksforgeeks.org/">            <b>Geeks for Geeks</b></a> as just a blog based site with            articles on programming questions, then later on expanded            to courses and now is a portal covering programming            questions, interview experiences and even a coding platform            taking inspiration from other competitive coding sites.        </p>    </div></body>  </html>
Output:
Method 2: By making the position relative to the first line, set the text-indent to -26px and padding-left value to 26px. Here in this example, we have made the position of the second line relative to the first line. So the second line is indented/aligned according to the first line.
Example:
<!DOCTYPE html><html>  <head>    <title>        Set indent in second line of paragraph    </title>      <meta name="viewport" content="width=device-width,         initial-scale=1.0" />          <style>        body {              margin: 15px;            font-family: Times New Roman;        }          #container {            margin: 0 auto;            max-width: 500px;        }          #container p {            border-top: solid 3px #808080;            margin: 0;            padding-top: 15px;            font-size: 1.4em;            font-weight: 100;            line-height: 1.6em;        }          #container h1 span {            color: #008000;        }          #container h1 {            text-indent: -26px;            padding-left: 26px;        }    </style></head>  <body>    <div id="container">        <h1>            <span>#</span>            GeeksforGeeks :: A computer Science Portal For Geeks        </h1>          <p>He started with <a href="https://www.geeksforgeeks.org/">            <b>Geeks for Geeks</b></a> as just a blog based site            with articles on programming questions, then later            on expanded to courses and now is a portal covering            programming questions, interview experiences and even            a coding platform taking inspiration from other            competitive coding sites.        </p>    </div></body>  </html>
Output:
CSS-Misc
HTML-Misc
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.