Images Can Have CSS Padding - Crazy! (Saucy)

Posted October 1, 2007 at 8:03 AM by Ben Nadel

Tags: HTML / CSS

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

+1 to Gus.
+1 to super panties.

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

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

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

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

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

@Andy,

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

@Todd,

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

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.

@Glen,

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

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

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.

@Chris,

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

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

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

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

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

@Dave,

Sorry - stressed at work today - a bit jumpy :)

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

that's the coolest css example ever! =D

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!

@Henk, @Jon,

Glad that you liked this.

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?

"R'amen" is how we Pastafarians say "amen."

Ahhhhh. Interesting. I don't eat pasta. Sorry.

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.

Ben,

Muchas Gracias a TI.

This is exactly what I was looking for :). This little trick saved my life from plunging into a pit of doom.

Happy coding.

Post A Comment

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.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:	Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>
	Remember my information
	Subscribe to comments
	Send me a copy of this comment