Padding top and bottom doesnt work on other inline except img.....Why?

[adamwestrop]

I'm experimenting and getting to grips with CSS at the moment.

Can someone explain to me why, margin top and bottom and padding top and bottom has no effect on say a <span> tag used on ordinary text inside a paragraph or say a <q> tag and that float doesnt really seem to work.

However with an img, margin and padding top and bottom does work (even though its an inline element and float seems to work perfectly.

Thanks,

[bullant]

float works just fine.

Post your code so we can see what is going on.

[vikram1vicky]

<span> is an inline element, thats why margin, padding, height, width does not work on it. It works only on block elements.

There are 2 types of HTML elements inline and block level,. For better understanding. read following links:

http://www.w3.org/TR/html4/struct/global.html

[adamwestrop]

Originally Posted by bullant

float works just fine.

Post your code so we can see what is going on.

Sorry Float does work....

So why dont inline padding top and bottom work whilst for an img it does? This makes sense, but just wondered if there was a technical reason??

I assume if I wanted to get round the padding top and bottom issue, I could obviously use either <p> and style the p or wrap stuff up in divs and padding would work there too???????

[bullant]

Originally Posted by adamwestrop

So why dont inline padding top and bottom work whilst for an img it does? This makes sense, but just wondered if there was a technical reason??

This discussion will hopefully clear things up.

[adamwestrop]

Originally Posted by vikram1vicky

<span> is an inline element, thats why margin, padding, height, width does not work on it. It works only on block elements.

There are 2 types of HTML elements inline and block level,. For better understanding. read following links:

http://www.w3.org/TR/html4/struct/global.html

Margin left and right is working at the moment, but up and down etc isnt

[bullant]

Originally Posted by adamwestrop

Margin left and right is working at the moment, but up and down etc isnt

The reason is explained in the link I posted in my previous post (scroll down about 1/2 way down the page)

[vikram1vicky]

define following CSS properties to <span>, it will behave as block level element:

.classname {
display:block:
width:200px;
height:100px;
float:left;
padding: 3px;
margin: 3px;
}