Tech Junkie Blog - Real World Tutorials, Happy Coding!: CSS: Take Control Of Your Text Indentation With text-indent

Friday, July 9, 2021

CSS: Take Control Of Your Text Indentation With text-indent

Have you always wished to have more control with your text position, but feel like you limited with the text alignment of

Align Left text-align: left;
Align Center text-align: center;
Align Right text-align: right;
Justify text-align: justify;

 Well you could always do that with CSS with the text-indent property, the only caveat is that it has to be a block based element.  Meaning it automatically puts a line break after the tag.  If you need a refresher on block vs line element, I have an excellent post on this topic here.  I know a shameless plug, oh and please click on my ads so that I can retire on a tropical island!...lol

Anyways back to the tutorial.  So with the text indent you have total control over the indentation you need on your block element.  It could either be a length value or a percentage value.

Well first let's define a div that we want our text to be in, then the text-indent will be based on that div.

Let's say we have the following styles:

div { width: 800px}

p.tdp {text-indent: 15%}

And the following markup

<div>
    <p class="tdp">Indent this text please Indent this text please Indent this text please Indent this text please</p>
   <p>This is just normal text This is just normal text This is just normal text This is just normal text This is just normal text</p>
</div>



The output would look something like this:










The cool thing about text-indent is that you can indent in reverse, like this

text-indent: -15%;

And the output will be the opposite, as you can see the indentation is going in reverse.  But you have to be careful when the value is negative. If you notice the text goes off the screen because -15% is off the screen.  So make sure have enough space.  Also you can use the em, px, rem measurement unit on the property as well.









Here is the entire HTML markup:

<!DOCTYPE html>
<html>
    <head>
        <style>
            div { width: 800px}
            p.tdp {text-indent: -15%}
        </style>
    </head>
    <body>
        <div>
            <p class="tdp">Indent this text please Indent this text please Indent this text please Indent this text please</p>
            <p>This is just normal text This is just normal text This is just normal text This is just normal text This is just normal text</p>
        </div>
    </body>
</html>

Previous: CSS: The em Unit

2 comments:

  1. kumaranJuly 14, 2021 at 1:35 AM

    I am Intrested to the site and thanks for this site ...keep sharing
    Best Technology details read content

    ReplyDelete
  2. Movers and packersJanuary 3, 2024 at 2:05 PM

    Hiring professional movers and packers is a strategic one that significantly impacts a relocation's overall success and experience

    ReplyDelete

Subscribe to: Post Comments (Atom)

Search This Blog