HTML And CSS Text Wrap Indent Tutorial
Let's kick things off with text-indent. It's pretty basic. It's a CSS property. It indents text. Oh, what, I'm already using it to indent this paragraph. I'm using 75px here but em and % are great also.
<style>#indent{text-indent:50px}</style>CSS<p id="indent">Let's kick things off with...</p>HTML
But what if I want to indent all of the lines in the paragraph except for the first line. That is, indent all of the line wraps. An inverse indent, or a hanging indent I think it's called. I'm doing this with a -75px indent, making the first line stick out to the left of the rest of the paragraph by -75px. Then I'm using a margin-left:75px to move the whole paragraph block over to the right by 75px. So the line wraps aren't really indented, the first line is just indented negatively, and the whole thing is moved back over by the amount of the indent. Also, I'm using a div to center the paragraph block, that is, center the block containing the text, not the text itself, because setting margin-left:75px is going to screw up margin:0 auto.
<style>#indent{text-indent:-75px;margin-left:75px}<!-- setup indent-->.center{margin:0 auto}<!-- center paragraph --></style><div class="center"> <p id="indent">But what if I want to indent...</p> </div>
IndentWhat about this kind of indenting? Is this even indenting? I mean, I'm still using text-indent. Here I'm also using a span around the word indent, over there, the one that's sitting off to the left. So I'm using a span around that that's setup with the same 75px left margin of the indent. So it kinda just sits in the indent.
<style>#indent {<!-- setup indent-->text-indent:-75px; margin-left:75px; }.center {<!-- center paragraph -->margin:0 auto; }#indent > span {<!-- span in the indent -->display:inline-block; margin:0 0 0 75px; }</style><div class="center"> <p id="indent"> <span>Indent</span>What about this kind of indent...</p> </div>