...

View Full Version : Padding top and bottom doesnt work on other inline except img.....Why?



adamwestrop
08-14-2011, 10:32 AM
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
08-14-2011, 10:42 AM
float works just fine.

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

vikram1vicky
08-14-2011, 11:12 AM
<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
08-14-2011, 11:16 AM
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
08-14-2011, 11:26 AM
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 (http://www.maxdesign.com.au/articles/inline/) will hopefully clear things up.

adamwestrop
08-14-2011, 11:26 AM
<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
08-14-2011, 11:30 AM
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
08-14-2011, 11:32 AM
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;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum