Easy css question - Div padding?

Discussion in 'CSS' started by le007, Aug 15, 2008.

  1. #1
    		
    <div style="padding: 0px; background-color:yellow;">
    Hello
    <img src="hello.jpg" style="margin:0px;">
    </div>
    
    Code (markup):
    Why are there 2px space under the image?
    Thanks
     
    le007, Aug 15, 2008 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    The image is an inline-level element - as such you are seeing the effect of line-height upon it.

    Set display:block on it and that padding will go away - though it won't be on the same line. You can control it's position on the line by playing with the vertical-align property.

    ... oh, and don't trust the default line-height since gecko doesn't use the same default as everyone else (or even on two lines in a row depending on the metric) - you want the image to appear with no border top and bottom, you'll need to set the line-height the same as the image height.
     
    deathshadow, Aug 15, 2008 IP
  3. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #3
    Excellent, thanks.
     
    le007, Aug 15, 2008 IP