IE space between images

Anyone that does a fair amount of web design knows that Internet Explorer likes to “set itself apart” from the other major browers by not interpreting html the same way. This can be very annoying at times and here is just another minor fix to get IE to behave itself! Many times, when you try and put multiple images on a page right up next to each other with no space in between, IE won’t quite do it. The browser puts its own provided padding around the images which causes them not to be able to fit perfectly together. This can be avoided with a simple css attribute. What I like to do is simply add a class, lets call it ‘img’, to each of the images that I want to get rid of this padding on in IE. (I usually just do it to all my images) Then the img class can be added to the css stylesheet and given one simple attribute!
In your html, just add class=”img” to all the images you want to remove the padding on. Then add the following attribute to your img class in your CSS stylesheet:


This will get rid of that annoying padding Internet Explorer puts around its images. Feel free to comment with any questions!

READ ALSO  Favicons missing in Opera 11

You may also like:

Allow Contributors Role to Add Images in WordPress If you are dealing with guest writers, they are most likely set to the contributor role in WordPress. The one problem with the default contributor rol...
CSS float property tweak If you have ever done any work styling a web page with CSS, specifically the float attribute, you may have come across a minor annoyance. If you are ...
Bullets in HTML email disappearing? Are you crafting an HTML email to send out and trying to use bullets? If they are suddenly disappearing in Outlook 2007 or Outlook 2010, try adding th...
Disable Tab Preview in Internet Explorer If you are like me you probably have 15+ tabs open all the time. To have a tab preview show at the bottom is usually useless and just takes up real es...
Get rid of dashed box around links A great easy improvement for any website is getting rid of that annoying dashed box that appears when clicking on a link. Many big sites like
  • Robert Van Kleeck

    Wouldn’t it be easier (if you are applying this to every image on a site) to just use the global img selector?
    (img{ display:block;} instead of .img{ display:block;})

    Then, should you want an image to not display in block, you could have a class that displays inline or table-cell or what have you. (.img_not_block{ display:inline;})

    • Thanks for the comment Robert, and yes I have also done it this way for some of my pages. (Ones that I won’t ever need much or anything displayed inline) However, I wanted to demonstrate the use of a CSS class to style certain images as {display:block} simply because of the instances I have found it to be useful. One example being a dynamic menu composed of stacked images that are triggered on or off in php. These have to be styled as {display:block} or IE will put space in between each of the stacked images. However, I have a lot more images on the page that I would prefer to be “untouched” and still {display:inline} by default. This way the menu may have the class with the {display:block} attribute and the rest will style as normal.

      Both ways will work of course, it really just depends on your specific needs. I simply use whichever method is most efficient and takes the least amount of code. I have found that I usually have a significantly smaller amount of items needing to be {display:block}, which is why I prefer the class method.

  • Jake

    thank you.
    Just the solution I needed!

    I just added the block style into my style sheet so it only effects the div where I was having the issue

  • Lisa

    Thank you so much, was making a simple invite to send to clients and couldn’t shake that – usually it takes me hours and hours of attempts to fix things like that, but I was lucky today to find your post and solve it in 5 minutes. Thank you thank you thank you!