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 trialRichard Verbraak
7,739 PointsInline elements and padding
Hey is it me or does this video give conflicting statements about inline elements and padding?
Halfway the video you're told that inline elements will only accept left and right margins and ANY padding value.
Yet at the end of the video he states that only left and right padding is added to the link areas and not top/bottom. So not ANY padding value, just the left and right.
Am I being nitpicky or I am wrong in my understanding here?
2 Answers
Jennifer Nordell
Treehouse TeacherHi there, Richard Verbraak ! You're not nit-picky and this is tricky. Yes, it can accept any padding. However, an inline object does not have a height nor a width property. So even though you can assign a top and bottom padding, there will be no effect on the inline element. Here's some quotes from the teacher's notes
The browser does not apply width and height properties, or top and bottom margin settings to inline elements.
An inline element will only accept left/right margins and any padding value.
Also, you might check out this rather informative article
Hope this helps!
saad
26,165 PointsHi, can you kindly advise as I added padding to all sides of the .name and .main-nav li classes and it added padding to all four corners? Thanks.
Andrea Scianna
11,928 PointsI'm courius about that, any response ?
Richard Verbraak
7,739 PointsRichard Verbraak
7,739 PointsThanks, and thank you for the article as well!
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 PointsSilvia Ramos
Front End Web Development Techdegree Graduate 18,318 PointsHey! very helpful! my question now is: why does he apply 10px on the padding them? can't he just add:
OR
padding: 0 15px;
Thank you :)
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherHi, Silvia Ramos! He totally could have! I think he's trying to illustrate the point that top and bottom paddings will not be applied. He could have done
padding: 100px 15px;
and gotten the exact same effect since the 100px part won't be applied.