Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2015-02-03
3
Medium Priority
?
197 Views
Last Modified: 2015-02-03
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
Comment
Question by:alexmac05
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 40587001
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
 

Author Comment

by:alexmac05
ID: 40587021
So, for inline elements, padding-left would only affect the first line?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40587232
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

Technology Partners: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

671 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question