Images Can Have CSS Padding - Crazy! (Saucy) : Kinky Solutions : A Student's Perspective by Ben Nadel

Recent Entries Complete Entry List May 2008 April 2008 March 2008 February 2008 January 2008 December 2007 November 2007 October 2007 September 2007 August 2007 July 2007 June 2007 May 2007 April 2007 March 2007 February 2007 January 2007 December 2006 November 2006 October 2006 September 2006 August 2006 July 2006 June 2006 May 2006 April 2006 AJAX (13) Ask Ben (92) Books (12) ColdFusion (832) Exercise List (17) Flash (3) Health / Fitness (31) HTML / CSS (28) Javascript / DHTML (85) Life (62) Movies (20) Project HUGE (28) Relationships (6) Search Engine Optimization (14) Skin Spider (30) SQL (82) Work (101) XStandard WYSIWYG (21) RSS 2.0 Custom RSS 2.0

Posted October 1, 2007 at 8:03 AM

Tags: HTML / CSS

I was sitting in Union Square Sunday morning, reading through Bulletproof Web Design (as recommended by Javier Julio) when I came across an example that used padding on an image element. I had never seen this before, and frankly, it does not seem intuitive at all. I can't even believe that it works. Images seem like the basic building blocks of a page. They cannot contain children, and putting padding on an image, to me, is akin to putting padding on an individual character - it's not a container, how can it contain padding?

Befuddlement aside, I just wanted to try it for myself as seeing is believing. I put together the following page:

 Launch code in new window » Download code as text file »

Notice that one of the images is a standard, non-modified image and the second image uses CSS for both the padding and the border (to show where the padding is being implemented). Running the above code we get the following output:

And, to make matters even better, this looks exactly the same in FireFox and IE6/Win. Note, however, that my DOC TYPE is XHTML Transitional. This is very important. If I were to put the IE browser into quirks mode, the padding would no longer work on the image (just the border).

So far this Bulletproof Web Design book is teaching lots of new CSS and design goodness.

Download Code Snippet ZIP File

Comments (23)  |  Post Comment  |  Ask Ben  |  Permalink  |  Other Searches  |  Print Page

• Add To Del.icio.us
• Add To Digg
• Add to Spurl.net
• Add to Wists
• Add to Simpy
• Add to Newsvine
• Add to BlinkList
• Add to Furl
• Add to reddit
• Add to FARK
• Add to BlogMarks
• Add to Yahoo! My Web
• Add to smarking
• Add to Ma.gnolia
• Add to Segnalo

Reader Comments

Ben,

You're suprise might be come from the way you are thinking about what is actually happening.

You are not adding the border and padding to the image. You are adding the border and padding to the image container which is the img tag. I'm sure you've been familiar with the border attribute of the img tag for years.

I'm sure once you think think of the img element as a container, being able to add padding will seem very logical.

Gus

Posted by Gus on Oct 1, 2007 at 8:25 AM

+1 to Gus.
+1 to super panties.

Posted by Todd Rafferty on Oct 1, 2007 at 8:37 AM

@Ben:

It seems extremely natural to me since the img has had support for the border and hspace/vspace attributes since the very early days of browsers.

Posted by Dan G. Switzer, II on Oct 1, 2007 at 9:06 AM

@Gus,

I guess if you think about the IMG tag as the container with the graphic inside it makes sense. I have just never separated the tag from its contents before.

@Dan,

The border makes sense to me, and the H/VSpace I just always thought of as MARGIN space, which feels natural as it is outside of the object.

Also, I don't want people to think that I think this is a bad thing. In fact, the opposite is true - this is a way cool CSS feature that I wish I had known about before.

Posted by Ben Nadel on Oct 1, 2007 at 9:40 AM

Well, you're on the right path dude. I can't recommend those books enough. I wish I could show someone some of the older code we had versus the new streamlined code and how much faster the admin site has become for us because we've ditched all the excessive tables and moved over to a transitional xhtml / css best practice. Only thing I use tables for is for queues and now and again, for a weird form layout. If you have any CSS questions or anything, drop me a line and I'll chat with you.

Posted by Todd Rafferty on Oct 1, 2007 at 9:44 AM

You forgot the "saucy" tag to this post.

Now combine the padding/border with a margin attribute and make your images look and position JUST like you want them to.

Posted by Andy Matthews on Oct 1, 2007 at 9:53 AM

I figure the graphic was too small to require "Saucy"... but I can add it.

Posted by Ben Nadel on Oct 1, 2007 at 9:54 AM

Oh...and FYI, this also works with a Strict DTD.

Posted by Andy Matthews on Oct 1, 2007 at 9:55 AM

@Todd,

Thanks a lot. After this book, I have three others recommended by Javier to get through. Should keep me occupied for a good while (I am a painfully slow reader).

Posted by Ben Nadel on Oct 1, 2007 at 9:56 AM

Sheesh...how's that for service...not that I'm personally complaining because that's a REALLY nice picture.

By the way, love the stuff you come up with...you're starting to get up there with Ray, and Ben, and Sean (IMO at least).

Posted by Andy Matthews on Oct 1, 2007 at 9:56 AM

Mr. Nadel just has his own unique style, which shouldn't change. This also includes his topic choices. His XML/XST stuff has been great. I love his blog layout as well. It's inspiring. I'm working on my own blogging engine at home and I can only hope that it's as good as this layout / organizational wise.. :)

Posted by Todd Rafferty on Oct 1, 2007 at 10:01 AM

@Andy,

Thanks for the kind words :) That means a lot.

Posted by Ben Nadel on Oct 1, 2007 at 10:02 AM

@Todd,

Also, thank you very much for the kind words :) This is a good way to start off my Monday!

Posted by Ben Nadel on Oct 1, 2007 at 10:03 AM

Try this. Insert a 1x1 spacer.gif in your page. Give it a CSS BACKGROUND-IMAGE. It shows through the spacer.gif. Now position it using background-position. That works too. I learned that works recently too.

Posted by Glen Lipka on Oct 1, 2007 at 10:36 AM

Sorry, I forgot to finish. Make the height/width of the img with the spacer.gif to be larger, even though the spacer is 1x1. It stretches and is still invisible. Make it big enough to put your image in it.

Jack Slocum uses this technique to show icons. It's semantically correct in using a IMG tag for an icon, but it allows background-sprites.

Posted by Glen Lipka on Oct 1, 2007 at 10:38 AM

@Glen,

That's a cool idea. I never thought about giving an image a background-image :)

Posted by Ben Nadel on Oct 1, 2007 at 10:40 AM

Bulletproof Web Design is an excellent book, just got a copy myself.

Posted by TJ Downes on Oct 1, 2007 at 12:47 PM

Want to get even wackier with IMG tag CSS attributes? I did a small project a while back that involved an html-based modal window that had some fancy graphics around its edges and close/next/previous buttons on it, etc. The client really wanted the text inside the modal window to grow and shrink (with CTRL-+ and CTRL--). Trouble was, the images that made up that window's border would stay the same size, and everything got messy fast. CSS to the rescue. What I ended up doing to solve it was using EM values for the sizes of everything in there, including the images. While the image can get a bit jagged when you keep making it bigger, it can really work wonders to stick with EM measurements.

Believe it or not, you CAN do this:

img#myImg {width:1.2em;height:2em;}

...and that image will grow and shrink when you change the browser's font size.

Dig it.

Posted by Dave Anderson on Oct 9, 2007 at 6:30 PM

@Dave,

Interesting. So the image you had was physically part of the modal window layout? It wasn't like a background image or anything?

Posted by Ben Nadel on Oct 10, 2007 at 8:17 AM

I used to use CSS on my images just like you did here with a little extra padding on the bottom to get a polaroid look for image thumbnails. Love it.

Posted by Chris on Oct 10, 2007 at 2:22 PM

@Chris,

Yeah, I have a feeling I am going to love it as well :)

Posted by Ben Nadel on Oct 10, 2007 at 2:29 PM

@Ben -
That's correct. A modal window with plain ol' IMG tags, with sizes specified in EMs.

Posted by Dave Anderson on Oct 18, 2007 at 12:52 PM

Well,i did not see many difference between those two pictures. :/

Posted by Avery on Jan 9, 2008 at 3:11 AM

Post Comment  |  Ask Ben