JANUARY 20, 2016

Tags:

How to Add Padding Around Your Images Using CSS

Written by: Michael Mira

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...

Vetted freelance developers ready to start working on your project today.

get a quote in just 15 minutes

You might also like

  • JANUARY 21, 2016

    Mobile-Friendly is a Must

    Written by: Adam Ritchie

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

    Advertising is changing. Traditional methods like advertising on TV are becoming less and less effective, due to the rise of commercial-light and c...

  • FEBRUARY 16, 2016

    This is Why You’re Not Getting Published

    Written by: Mary A. Grace

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

    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...

  • FEBRUARY 08, 2016

    The Top 5 Free Online Mobile Emulators

    Written by: Michael Mira

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

    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...

FILL OUT THE FORM
TO GET A QUOTE!
$149monthly plan
The Freelancer
  • 5 developer hours per month
  • Additional development time at $29/hour
  • Unused hours roll over up to three months*
  • Unlimited support 7 days a week
  • Cancel anytime
$495monthly plan
The Professional
  • 20 developer hours per month
  • Additional development time at $25/hour
  • Unused hours roll over up to three months*
  • Unlimited support 7 days a week
  • You can cancel at anytime
$1399monthly plan
The Business
  • 60 developer hours per month
  • Additional development time at $23/hour
  • Unused hours roll over up to three months*
  • Unlimited support 7 days a week
  • You can cancel at anytime

For 90 days from the date of each payment.