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

CSS CSS Layout Basics Controlling Layout with CSS Display Modes Positioning Elements Side-By-Side with Inline Display

Richard Verbraak
Richard Verbraak
7,739 Points
Posted by Richard Verbraak
Richard Verbraak
7,739 Points

Inline 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
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi 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! :sparkles:

Richard Verbraak
Richard Verbraak
7,739 Points
Richard Verbraak
Richard Verbraak
7,739 Points

Thanks, and thank you for the article as well!

Silvia Ramos
.a{fill-rule:evenodd;}techdegree seal-36
Silvia Ramos
Front End Web Development Techdegree Graduate 18,318 Points

Hey! very helpful! my question now is: why does he apply 10px on the padding them? can't he just add:

     padding-right: 15px;
     padding-left: 15px;

OR

    padding: 0 15px;

Thank you :)

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi, Silvia Ramos! He totally could have! :smiley: 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.

saad
saad
26,165 Points
saad
saad
26,165 Points

Hi, 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
Andrea Scianna
11,928 Points

I'm courius about that, any response ?