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.
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
I am Intrested to the site and thanks for this site ...keep sharing
ReplyDeleteBest Technology details read content
Hiring professional movers and packers is a strategic one that significantly impacts a relocation's overall success and experience
ReplyDelete