text-indent: 10%; : text indent « CSS « HTML / CSS

text-indent: 10%;

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title>text-indent</title>
<style type='text/css'>
body {
    font: 14px sans-serif;
}
p {
    padding: 5px 25px;
}
p#indent {
    text-indent: 25px;
}
p#indent-percentage {
    text-indent: 10%;
}
p#indent-reverse {
    text-indent: -25px;
}
p.indent-example {
    background: lightyellow;
    border: 1px solid darkkhaki;
}
</style>


    </head>
    <body>
        <h4>Indenting Text With CSS</h4>
        <p>
            Text can be indented by a positive length value, as is demonstrated
            by the following paragraph.
        </p>
        <p class='indent-example' id='indent'>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
            do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum
            dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.
        </p>
        <p>
            Text can be indented via a percentage value, as is demonstrated
            by the following paragraph.
        </p>
        <p class='indent-example' id='indent-percentage'>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
            do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum
            dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.
        </p>
        <p>
            Finally, text can be reverse indented by providing a negative
            length value, which is demonstrated by the following paragraph.
        </p>
        <p class='indent-example' id='indent-reverse'>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
            do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum
            dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.
        </p>
    </body>
</html>

1.	'text-indent' Example
2.	text-indent: 25%
3.	text-indent: -5%
4.	text-indent: -25px (positive value)
5.	text-indent: 25px;
6.	text indent: -0.75em
7.	text-indent: 3em
8.	text-indent: -25px;
9.	text-indent:3em;
10.	text-indent: -15px;
11.	text-indent: -25px;(negative value)
12.	text-indent: 25%;(percentage)
13.	text-indent: 20px;
14.	paragraph indent
15.	Paragraphs separated by indenting
16.	Set text indent to 37%
17.	Set text indent to 35px
18.	Set text-indent to 2.5em
19.	Negative text indent value: -60px
20.	uses a negative value for text-indent and a positive value for padding-left.
21.	Set text indent to -5em

text-indent: 10%; : text indent « CSS « HTML / CSS

Related examples in the same category