htmlcssimagemargin

Remove unexplainable img margin/space (CSS)


I have some unexplainable image margin/Space below img when including images in my wordpress theme. You can see it here: http://www.wlanradios.net/logitech-squeezebox-radio/

See the Amazon logo image inside the content or scroll down and have a look in the "Ähnliche WLAN Radios" sidebar widget with the small thumbnails. The images seem to have a little margin-bottom / Space below it I can not get rid off. I discovered the html/css with firebug but don't get the it where this margins comes from. I in fact tried to

img {
margin:0!important;
padding:0!important;
border:0!important;
}

to overwrite every possible causes for the margin, with no success.

Where is the margin coming from and how to remove it?


Solution

  • Just apply this to those images:

    display: block;
    

    Some explanation: img is an inline element, so it has to deal with white-space, line-height, etc., as all inline elements. I guess the space you're seeing is actually caused by the line-height. So another solution if you want to keep your img as inline elements is to set its parent line-height: 0;.