Graphics and CSS

April 17, 2007 12:13 PM

Probably a dead-simple CSS question. I'm trying to pad an image in a Wordpress based blog so that the text isn't crunched right up against it.

The latest entry in my web log (Marc Maron) is positioned correctly but the text is right up against it. I just want some padding on the right side of the image but for the life of me, I cannot remember how to do this. Searching previous CSS related questions is melting my brain!

posted by KevinSkomsvold to computers & internet (12 comments total)

You're not looking for e.g.,

#element {padding-right:715px}

are you?
posted by boo_radley at 12:21 PM on April 17, 2007

Hmmm.. I don't remember that. I used to do it inline (in the entry itself). Does that make sense? I'm a real doofus when it comes to CSS.
posted by KevinSkomsvold at 12:24 PM on April 17, 2007

I think you need a ; before the } but otherwise boo has it.
posted by dobbs at 12:25 PM on April 17, 2007

If you want it inline, try something like this:

<img src="image.jpg" style="padding-right: 5px;" />
posted by afx114 at 12:29 PM on April 17, 2007 [1 favorite has favorites]

If you want to do it without CSS:

<img src="image.jpg" hspace="5">

But that will put 5 px on both the left and right sides of the image. CSS lets you specify one side in particular.

The vspace attribute is similar, but adds space to the top and bottom.
posted by Artifice_Eternity at 12:32 PM on April 17, 2007

afx114? You just rocked my world. It's the little things, isn't it? Thanks a bunch.
posted by KevinSkomsvold at 12:33 PM on April 17, 2007

Woah Artifice, that was the code I used to use! It was along the lines of hspace="2" vspace=2" but it always seemed to be a little off to me. Afx114's solution worked as well. Thanks again.
posted by KevinSkomsvold at 12:36 PM on April 17, 2007

style="padding-right: 5px;" />

if i remember correctly, this may not work on every browser. I usually go with style="margin-right: 5px;" /> on images.
posted by drjimmy11 at 1:25 PM on April 17, 2007

Yeah, drjimmy is right, you should use a margin instead of padding. I always screw that up. So it should actually be:

<img src="image.jpg" style="margin-right: 5px;" />

My bad.
posted by afx114 at 1:43 PM on April 17, 2007

Will this work on a too? If so, this is just what I've been looking for. (On our web site at work, I have a DIV containing an image with a caption, and the rest of the page text is too close to the .) I'm going to try it out right now.
posted by Joleta at 2:20 PM on April 17, 2007

Joleta, assuming you were asking about a div, yes, it will work. You can put margins (and padding) on many elements in CSS. That's part of why CSS is so neat. It's very flexible.
posted by litlnemo at 5:07 PM on April 17, 2007

I prefer to add something like:
  .post img{margin-right:5px;}
into the style.css file that likely lives in your current theme's directory. This applies a 5 pixel margin to the right of every image in any post and keeps you from having to muck with each individual image. It's the cascading part of what's so neat about CSS.

Sorry I got to this late - I saw it last night, but forgot to give my $.02
posted by maniactown at 3:03 AM on April 18, 2007