Question

I saw on a website image thumbnails with a nice white 4px border and a 1 px grey border boundary like the one below:

I thought they were don by using at least 2 elements like an IMG elment inside a DIV element applying the 1px border to the DIV than a white border to the IMG (or white background to DIV plus a 4px padding to the DIV).

But it’s cool (at least for me that i did not know) they are done with just one IMG element applying background and padding drirectly to the IMG element. I did not know you could do this.

   img.two_colors_border 
   {
     display: block;
     position: relative;
     background-color: #ffffff;
     border: 1px solid #a9a9a9;
     padding: 4px;
   }

   <img src="dfjdfkj.jpg" class="two_colors_border">

I tested and it works on IE7/8 Chrome Safari and FF. My question is: is this just a CSS trick but IMG element are not supposed to have a padding/background applied, or is this something I can freely use without worries?

Thanks

Answer 1

It’s fine. Replaced elements like images have padding and border like any other element.

Padding on images doesn’t work in IE5, or consequently in Quirks Mode in IE6 and later. Clearly though, no-one worries about IE5 any more, and no-one should be working in Quirks in any modern web site.