CODEWITHSUNDEEP
cssborderimagepadding
Marco Demaio
Marco Demaio

Reputation: 34437

CSS using background and paddign on IMG elements to create a two colors border around image

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

alt text

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

Upvotes: 2

Views: 442

Answers (2)

bobince
bobince

Reputation: 536795

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.

Upvotes: 3

ArK
ArK

Reputation: 21076

Using padding with img is normal but makes problem with ie6 and below .Previously hspace and vspace used but its not supported by some browsers. see its compatiability

Upvotes: 0

Related Questions