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

6 Answers

You are all correct in that the padding is still applied. In the video, Guil has applied a transparent background to his <a> elements, so there's no visual change when he adds the top and bottom padding, but the padding is still there. You would see the padding if the background was some other color.

So what's important to understand is that the top and bottom paddings on inline elements do not affect the way the browser displays that element and it's neighbors in the way that it does on block elements.

Check out this codepen for a demonstration: https://codepen.io/anon/pen/NxKQap

Notice how the 1st and 2nd items both have padding of 1rem, but the paddings overlap because the browser isn't adding that 1rem of separation between the inline elements. Uncomment line 19 in the css to see the padding on the 2nd <a> element. The 3rd <a> element has its display set to inline-block, so the browser actually shows the visual separation of 1rem.

Kieran Corcoran
Kieran Corcoran
11,188 Points

Padding can be given to any display element. However, when applied to an inline element the top and bottom padding's do not affect the surrounding elements.

In other words "it does not affect other elements like: Block, Inline-block"

For me it only works on the heading and that's because it's a heading. That's a block level element so it will apply padding, even though there's a link in there.

What padding did you apply?

Left and right padding are supposed to work on inline elements, just not top and bottom.

Yeah, can someone please chime in on this? It works for me, too. https://codepen.io/anon/pen/RWdJJw

Also on the exercise, I adding padding to the list items (set to inline), and they also accepted top and bottom padding.

The only reason I can think of for the links not accepting padding in the video is that the link is nested within another inline element, so the child of the inline element cannot accept padding, online the parent(li) can? From CoDrops CSS Reference:

Inline-level elements can have padding and margins, but they cannot have width and height. Specifying a width and/or height on an inline element does not change its dimensions. Giving the element padding and margins will push the other elements on the line horizontally, but not vertically. http://tympanus.net/codrops/css_reference/display/