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 cf.Objective() 2014 (Bloomington, MN) 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.



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

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

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.

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.

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

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

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

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.

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.

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.

@Dave,

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

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.

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

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.

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

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

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

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

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.

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

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

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!

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.

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

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.

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?

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.

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.

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.

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.