Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    60
    Thanks
    32
    Thanked 0 Times in 0 Posts

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

    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,

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    float works just fine.

    Post your code so we can see what is going on.
    Last edited by bullant; 08-14-2011 at 11:05 AM.

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    <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

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    60
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bullant View Post
    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???????

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by adamwestrop View Post
    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.

  • #6
    New Coder
    Join Date
    Aug 2011
    Posts
    60
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    <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

  • #7
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by adamwestrop View Post
    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)
    Last edited by bullant; 08-14-2011 at 11:36 AM.

  • #8
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    define following CSS properties to <span>, it will behave as block level element:
    Code:
    .classname {
    display:block:
    width:200px;
    height:100px;
    float:left;
    padding: 3px;
    margin: 3px;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •