Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 249
  • Last Modified:

CSS padding-left on span creates an indent for the first line only?

The CSS rule

span
{
    padding-left: 3em;
}

has the effect of indenting the first line of the span. Like this:

          This is the first line of text in the span and this is indented. But, the second
line is not indented.

My Question: Why wouldn't all of the text in the span be indented 3em? Why is it that this is contained to the first line of the span?

cheers,
alex
0
alexmac05
Asked:
alexmac05
  • 2
1 Solution
 
Tom BeckCommented:
At a guess I would say that you are looking at text that is wrapping to the next line. <span> is an inline element. If you put display:block in the css definition it would indent all the text.

More information: http://www.w3schools.com/html/html_blocks.asp
0
 
alexmac05Author Commented:
So, for inline elements, padding-left would only affect the first line?
0
 
Tom BeckCommented:
So, for inline elements, padding-left would only affect the first line?
There's really no first line, second line, etc. with an inline element.

Think of it this way. Text inside an inline element will print out in a straight line until it hits a boundary (edge of a block element container, browser window, etc), then it will wrap to the next line by default (unless you specify white-space: nowrap). Any styling applied to an inline element will be applied as if the contents of the element will be displayed in a straight line, the auto text wrapping is not considered. So padding-left:3em will only be applied to the beginning of the straight line.

If you add display:block to the span then it is no longer an inline element. It will now behave as a block element.

Thanks for the points.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now