IE space between images

Author: | Posted in CSS, Web 4 Comments
css

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:

.img{
display:block; 
}

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

Incoming search terms:

  • get rid of cell\s gaps in internet explorer
  • ie 9 images in table without gaps
  • image padding in internet explorer
  • placing images within a block ie9
  • 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;})

    • http://theitbros.com Brett Jackson

      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!