inline elements

Here's the thing with that...

Padding can be given to any element with any display, it's just that when it's applied to an inline element, the top and bottom padding's do not affect the surrounding elements. By that I mean it doesn't move them like it normally would with block or inline block. It DOES change the padding of the inline element that you used it on, it just doesn't look like it does normally because 1. it doesn't push any surrounding elements away like you'd expect and, most importantly 2. you'd never know because 99% of the time, the inline element proooobably has the same background color as the other inline elements surrounding it, right? Think about it. Typically, what are your most common inline elements?

• Span: you're using that to typically change the color or text style of a certain snippet of text. Where does that text exist? 99% of the time, it's inside something else like a parapgraph or caption or something.

• Anchor: This usually exists as its own thing inside of a list item (where you can simply modify the padding of the li to achieve spacing) or, like the span tags, will exist inside of a paragraph tag surrounded by other text, or in a caption of some sort.

most of the time you're using those and you simply never come across a pure example where you'd see the reality of what's going on with inline padding-top and padding-bottom because why would you? If you want padding on a link, it's very very rare that a link isn't wrapped in something else that you would apply padding to and with a span, that's more often than not either in a paragraph (so you wouldn't want to add padding anyway (if you could ) because it'd mess up the flow of the paragraph and it'd look ridiculous ) or, like the anchor, it's in something else that can be padded (i.e. heading or li tags)

BUT what gives? You thought you saw something. Actually, you didn't.

This goes back to the background color thing. Your .nameelement has the same background-color as the surrounding elements, so you don't really see what's going on.

Tell you what, do this...

1. Go to the 1st paragraph in the 'secondary col'div and apply a spantag around the words Cooking marshmallow.
2. Give it a class of pad-test
3. Add a class selector of .pad-test to the css
4. Give it a padding and set it to padding: 0;, save and refresh
5. Set the property to padding: 25px 0;, save and refresh (what happens? Nothing really, huh?)
6. Set the property to padding: 125px 0;, save and refresh (hmmm... nothing, right?)
7. NOW... Set add a background-color property and set that to orange. Whoa...

Take heed. This is what's happening in reality, it just doesn't cause the other elements to move like it would if it were block or inline-block. There's your final test... add ~display: inline-block;~ and see what happens.

Hehe... all of a sudden!

Anyway, display and positioning certainly is ... uh... well, this about sums it up.

lol. Anyway, I hope that helped to clear everything up for ya.

Cheers,

Huck -