CSS Image Basics

Dressing up images on your website or blog can make the difference between a professional or amateurish look. Using CSS is an easy way to give your images an extra punch.

Follow along till the end, and I’ll show you how to put it all together.

Add a border to an image

border: 1px solid #ccc;

1px (pixel) is the width of the border. Solid specifies the border is a solid line. #ccc is the hexadecimal that specifies the color, in this case, light grey.

This can also be written by separating each rule:

border-width: 1px;
border-style: solid;
border-color: #ccc;

Adding padding to an image

Padding is the space between the image and the border.

The following rule will add padding equally around an image:

padding: 10px;

To add padding using shorthand use:

padding: 5px 10px 5px 10px;

The first padding (5px) above identifies the top of the image. The second is right. The third is bottom, and last is left.

If you separate each rule it would look like this:

padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;

Adding a margin to an image

The margin is the space between the outside of the border and the surrounding elements (ex. Text).

To add a margin equally to an image use:

margin: 25px;

The shorthand is similar to the padding above:

margin: 25px 25px 25px 5px;

Each padding rule can also be separated:

margin-top: 25px;
margin-right: 25px;
margin-bottom: 25px;
margin-left: 5px;

Wrap text around an image

Without using this code your image will sit on top of or on bottom of your image.

float: left;

To float your image to the right simply replace left with right.

Tying it all together

Add the following to your CSS style sheet:

.postImg {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 25px 25px 25px 5px;
  float: left;
}

Now you just need to add the class to your image tag.

<img class="postImg" src="frog.jpg" alt="frog" />

That’s it. Let me know if you have any questions.