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:
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:
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
For two property values, the sequence is Top-Bottom > Right-Left. For example:
padding: 20px 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.
and be the first to know it all
You might also like
Advertising is changing. Traditional methods like advertising on TV are becoming less and less effective, due to the rise of commercial-light and c...
If you are a small business owner, you’re probably doing a lot of your own SEO. From plugging pages in search, to trying to write on relevant, high...
Today, mobile design is just as important as web design itself. Think about it, a majority of us are connected to our smartphones. According to the...