How to Add Padding Around Your Images Using CSS

Brands today have embraced the power of visual media. The popularity of Instagram, YouTube, Snapchat and Pinterest is evidence of that. However, high-resolution images can only be effective if they are presented correctly. In a previous post, I talked about the importance of optimizing your images in order to increase website loading speeds. Some web designers add white space around the images in photo editing programs. Think of it as a digital version of mat boards used in framing photographic prints. This method is not recommended, because this will just increase the file size.

The better route would be to crop your image and use your website’s CSS editor to add padding. It’s a quick and easy process. In fact, you don’t need to be a seasoned web designer to do it. Simply follow these steps:

    1.   Crop Out the Excess

If you have any photos or graphics that have white space around them—meaning the white space is actually part of the image—crop it so that only the actual content is shown. If your image does not have any white spaces around it, then proceed to the next step.

    2.  Find the CSS Properties

Go to your website’s CSS editor and find the properties that detail the padding of your element. You should see the padding properties specifying the values of each side, like this:

padding-top: 50px;

padding-right: 30px;

padding-bottom: 50px;

padding-left: 80px;

Padding Example (1)

Here is a view of my Tumblr site’s elements. The padding properties indicate the values.

    3.  One, Two, Three, or Four

Websites are like snowflakes: each one is unique. This means that you might see padding properties with a different number of values. In its simplest form, you could use padding shorthand property, which contains all four sides:

p {

  padding: 10px 20px 10px 20px;

}

If you only see three property values, always remember that the property sequence is: Top > Right-Left > Bottom. For example:

padding: 20px 40px 60px

Translates to:

padding-top: 20px;

padding-right: 40px;

padding-bottom: 60px;

padding-left: 40px;

For two property values, the sequence is Top-Bottom > Right-Left. For example:

padding: 20px 40px

Translates to:

padding-top: 20px;

padding-right: 40px;

padding-bottom: 20px;

padding-left: 40px;

If the padding property contains just one value, then it applies to all four paddings. Now that you’ve mastered padding on CSS, you can begin optimizing your images so that your website is faster and cleaner.

1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 4.50 out of 5)
Loading...

Related posts: