Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Kailash Seshadri
3,087 Points<span> VS <p>
what is the difference between the span element and the p element?
4 Answers
Tushar Singh
Courses Plus Student 8,692 Pointsspan is an in-line element and "p" is a block element.
If you are not sure what are inline elements and block elements.
The simple definition would be block elements take up the whole width of the page(apart from margins)
and inline elements on the other hand takes as much space as they need.
Head over to this page Demo
Notice, when you change the display property how background color behaves. When it's block, it will take up the whole space but on the other hand when it's an inline element, it is different.
Tushar Singh
Courses Plus Student 8,692 PointsWell answer to your question is yes and no,What I mean by that is "p" is a block level tag for paragraphs. "span" is a line level tag that in and of itself doesn't do anything, but is useful for defining a specific style to a string. "span" can be used within "p", but "p" cannot be used within "span".
For better understanding, experiment with these elements and You'll see the difference and I would suggest add background-colors while experimenting, then you can easily see what's happening exactly.
and 1 thing I would like to pint out as well.Lets take a "div" element as well now(div is a block element as well) (Don't overthink on this part for now) These elements have specific semantic meaning, div is better referred for a block of content having different nested elements, p which is used for paragraphs, and span is nothing but an empty element, hence you need to use right tag for right thing, so for example wrapping the text inside div element will be less semantic than wrapping it inside a p.
Kailash Seshadri
3,087 PointsThanks Tushar I understand now.. but I can't seem to wrap my head around the part of your answer where you say 'span can be used within p, but p cannot be used within span'
Tushar Singh
Courses Plus Student 8,692 PointsSee it's not like you will get a syntax error when you'll use p inside a span. But as I'm sure you have understood the difference between block and inline elements, now just think when you create a span(inline element) and place a p(block) inside the span.What will happen? You just created a block element inside the inline element and it defeats the purpose of why You chose span element in the first place.You chose span because you don't want a whole block to take up the space
I know it seems a bit confusing. I just created a kind of demo to demonstrate what I mean by that. Check this out http://codepen.io/tushar_13/pen/LNQGRx
Tushar Singh
Courses Plus Student 8,692 PointsFor full view http://codepen.io/tushar_13/full/LNQGRx/
Now see the difference between the two things , I've added background colors so that You can easily see what's happening and make sure you see the code as well.
If you still have any doubt, change my code, play with it. Do whatever you want to clear your doubts. If you have any questions after this, well you know how to reach me!
Kailash Seshadri
3,087 PointsOK that makes sense now thanks a lot for your help!!
Tushar Singh
Courses Plus Student 8,692 PointsNo problem bro, I'm glad you asked the right question not just an answer for the code challenge.
Tushar Singh
Courses Plus Student 8,692 PointsWhile we are at it, You think you can understand margin and padding and work with them?
Kailash Seshadri
3,087 Pointsyes i can understand and work with margin and padding. thanks
saeed bin idan
4,338 Pointsalso more extra information is <span> using for do anything be inline with text or in the same line not break to new line also <p> is for paragraph reasons as you know from tushar singh answer.
Konrad Pilch
2,435 PointsP is also made for paragraphs, as well as h1-h6 are made for heaings, same as aside is made for sidebar etc.. it helps the browser to recognize is and make some adjustmes or something. Is more browser friendly.
Kailash Seshadri
3,087 PointsKailash Seshadri
3,087 PointsSo span and p do the same thing but span is inline and p is block right?