CODEWITHSUNDEEP
css
R.J.
R.J.

Reputation: 648

CSS second-line indent not working

Page in question: http://www.rjlacount.com/public/lander/

I'm probably just doing something stupid, but I'm trying to indent the second line of wrapping text inside the form (with "Your account: [email protected]" at the top) and I can't seem to get anything to work.

I would think the solution is:

form span {padding-left:1.5em;text-indent:-1.5em;}

but this only seems to indent the first line of each section.

Another look at this would be much appreciated, thanks!

Upvotes: 9

Views: 21834

Answers (3)

imamerican
imamerican

Reputation: 21

spans are handled as inline elements.

Considering them as actual characters helps to conceptualize the changes. A space after a span is retained because it's like a space between characters. You adjust height by line-height rather than simply height. etc etc

Usually if this is causing a problem you can just use a div and set display:inline-block; if you need horizontal alignment.

Upvotes: 2

Omer Tuchfeld
Omer Tuchfeld

Reputation: 3022

If the element is inline it will indent the first line, otherwise if it's a block element it will indent the rest of the lines, which is just like Briguy37 said, since that's the difference between DIV and SPAN. I just wanted to clear out that it's not a "problem with span".

Upvotes: 10

Briguy37
Briguy37

Reputation: 8402

For some reason, this works with a DIV, but not with a SPAN. Not really sure why, but here's a fiddle with the same CSS for both.

Upvotes: 4

Related Questions