November 10, 2003

Blogging > Movable Type and Images

So my text was butting up against my pictures. You could really see it when the image was left justified. I fixed it with this addition to my stylesheet:

.blog img {
padding: 0px 6px;
margin: 0px 6px;
}

The "blog img" part says that it only applies to images within the blog class, and not to images on other parts of the page. If you don't have a blog class, use whatever class you use for blog posts. Otherwise, just use "img", but it will apply to all images on your Web pages. That's OK, but be aware that it could cause spacing issues.

The first value (0px) puts zero pixels at the top and bottom. That way the images align with the top of the paragraph. Then second value (6px) puts six pixels of space to the left and right. CSS is pretty flexible. You can also specify one value (which will apply in all four directions) or four values (for top, right, bottom and left - an easy way to remember the order is that it's clockwise starting from the top).

Posted by lesjones



Comments

Loved this post. It fixed the same problem I was having. Kept trying to do it in the image, by adding padding. This did it for all subsequent postings, too. Thanks.

Posted by: Cartee at October 31, 2004

Terms of Use