Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with:

Images Can Have CSS Padding - Crazy! (Saucy)

By Ben Nadel on
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:

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html>
  • <head>
  • <title>Image CSS Demo</title>
  •  
  • <style type="text/css">
  •  
  • body {
  • font-family: georgia ;
  • font-size: 90% ;
  • text-align: center ;
  • }
  •  
  • img.border {
  • border: 1px solid #333333 ;
  • padding: 7px 7px 7px 7px ;
  • }
  •  
  • </style>
  • </head>
  • <body>
  •  
  • <h3>
  • Standard Image
  • </h3>
  •  
  • <p>
  • <img
  • src="super_girl.jpg"
  • width="180"
  • height="240"
  • alt="Girl in superman panties"
  • />
  • </p>
  •  
  • <h3>
  • Image With CSS Border And Padding
  • </h3>
  •  
  • <p>
  • <img
  • src="super_girl.jpg"
  • width="180"
  • height="240"
  • alt="Girl in superman panties"
  • class="border"
  • />
  • </p>
  •  
  • </body>
  • </html>

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:


 
 
 

 
CSS Image Padding Works In FireFox and IE XHTML Transitional Mode  
 
 
 

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.

Tweet This Groovy post by @BenNadel - Images Can Have CSS Padding - Crazy! (Saucy) Thanks my man — you rock the party that rocks the body!


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

Reply to this Comment

@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.

Reply to this Comment

@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.

Reply to this Comment

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.

Reply to this Comment

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.

Reply to this Comment

@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).

Reply to this Comment

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).

Reply to this Comment

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.. :)

Reply to this Comment

@Todd,

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

Reply to this Comment

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.

Reply to this Comment

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.

Reply to this Comment

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.

Reply to this Comment

@Dave,

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

Reply to this Comment

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.

Reply to this Comment

There are some women here also you know, I think it would be appropriate to be a gentleman and not a fourteen-year-old. Choose your pictures. That is someone's daughter. (like you would care, there are no gentlemen left in this world).

Reply to this Comment

14-year-olds aren't the only ones interested in scantily-clad women, Sofia. I fully acknowledge and respect your right to be prudish about such things, but please don't expect everyone to conform to your preferences. It's anti-democratic.

One of my favorite websites in the whole world-wide web is supertangas.com -- and yet I am also a non-chauvinist gentleman who considers himself a feminist. If you can wrap your noodle around that, then may the Flying Spaghetti Monster Bless America.

If there's any cause for concern about the example photo, I would think it would be the age of the subject rather than the subject material itself.

Reply to this Comment

@Dave,

How dare you post a link like that on this site! If you post any more than 40 or 50 more of those types links, I'll be forced to take action ;)

Reply to this Comment

Christ -- you haven't even had a chance to take it all in properly, Ben, and you're already mandating a quota? ;)

Reply to this Comment

@Sofia,

Keep your opinions to yourself. I'm sure the girl in the photo wanted the picture to be taken or she wouldn't have posed for the shot. But your complaining about it won't change anything. Just accept that men enjoy the female figure and they always will. It's how God made us. You should appreciate that, not get upset over it. You are only going to ruin your own day. :)

Reply to this Comment

Boys, boys boys - having to post photos of women you could never touch to make your article seem interesting. Get a life.

Reply to this Comment

Oh, Bill. If you don't stop and smell the roses once and a while, then it is you who needs to 'get a life'. Also, your demonstration of what psychologists call 'projection' reveals more about you than you'd probably like. ;) (I tease with love.)

Reply to this Comment

padding on images to me seems wrong to me personally.

The other thing is it doesnt seem to work with ie8. Which was before this article, but worth mentioning.

Reply to this Comment

@Eyekanspele,

Outside of this example, I don't think I've ever actually used it. I agree with you that there's something that doesn't quite feel right about it. Also, I think the opportunity to use it doesn't typically present itself (it's not often I need a space between an image and its border).

Reply to this Comment

Thanks for this great hint.
I consider myself a total html / CSS n00b en rely unnatural amounts on apps like dreamweaver. And those do not give me that option.

This works like a charm :)

Grtz from Holland

Henk

Reply to this Comment

Great post. I've come across your site many times trying to figure out IE bugs and you're always a savior. Keep up the great work!

Reply to this Comment

Personally, I think this is simply ridiculous. When I commented before on the fact that God made men to appreciate the female figure, I did not see the photo everyone was commenting on. I completely take back my comments as the girl in this photo is totally under dressed and should not be offering photos of herself in this way. I believe women should be modest if they have any respect at all.

Reply to this Comment

@Avery, I didn't see any difference between the two pictures at all, either. I thought there was going to be a huge difference, like the first was going to be a rail-thin girl and the second was going to put padding in the actual picture itself and give her a ghetto-booty or something.

@those concerned with the picture: it doesn't actually bother me...my view is that what other people do, that's their concern as long as it doesn't affect me. (but then again, I'm cool with the fact that some choose to live in a nudist colony, but I would personally never want to live there. for curiosity's sake, I MIGHT would visit, as long as they let me keep my own clothes on). The only thing is that when I am reading code for work, and code hints, I have to quickly scroll over the images so that no one actually sees me looking at images like that at work and thinks I am over here looking at weird stuff on the web while I am supposed to be working. Considering my reg ex example, I can't really comment too much on modesty. (though I like to think of it as tasteful).

For me, I would rather just let other people live as they will (again, as long as they don't bother me) and just deal with whatever comes out of it all. And, @Dave, I would consider myself the exact opposite...I would generally classify myself as a female who has some male-chauvinistic tendencies at times, and can almost say that I am a complete opposite of a feminist. (though I do believe that if you are going to be a total male-chauvinist, you really should step up to the plate, take care of all that needs to be taken care of, and actually take responsibility for those things that male-chauvinists should take responsibilities for, and not just an opportunistic male-chauvinist who only wants to push their life over on women).

Reply to this Comment

It's been almost 4 years, and this post is still generating controversy over the picture, eh? That amuses me.

The Flying Spaghetti Monster (may He embrace you in His noodly appendage), the one true Creator of Creation, has already endorsed the photo in question. Objections are all irrelevant.

R'amen.

Reply to this Comment

I saw someone had commented on it today, and since my opinion obviously means more than anyone else's, I figured I would put it out there. What is R'amen anyway?

Reply to this Comment

I was trying to find an answer to this... I'd like to add margin/padding to a background image that i've placed in css... can't see it as possible... just wondering... guess i'll go back in photoshop though and add more canvas to the picture.

Reply to this Comment

I am trying to align the icon in my Headings bar created with Div tag and CSS coding. Its still not aligned with the bar as it always stick to the top left corner of the heading. Pleas tell me any padding attribute for image so that i can align it left-center of the heading bar.

Reply to this Comment

I only discovered this padding on images today by accident when I typed padding instead of margin and saw it worked nicely. So I googled it and ended up here.

Reply to this Comment

why didn't you use your own photo of you in your y-fronts?

Women have to deal with this sexism all day every day, yes, all women. and yes, still talking about this photo because it is not germain to the coding discussion and degrades women in its use.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.