Learn to Space Your Photos with HTML Padding

It’s really valuable to learn a bit of HTML if you are a blogger, and learning how to add padding to your photos in order to space them correctly is such a necessary skill to add to your blogging toolbox! We recently shared how to Demystify Image Code. Now that you know a bit of what all that image code means, you can learn to manipulate your images!

Today you’re going to learn how to add padding to images.

Learn to Space Your Photos with HTML Padding What is padding? Padding the little bit of white space between elements. It defines the space between the element contents and the element boarder, clearing an area around an element. You generally don’t want two photos on your sidebar or in your blog posts touching each other, and you definitely don’t want text nestled right up next to a photo. Adding padding can help you create even margins between elements, which will make your blog posts and sidebar look clean and professional.

I use padding between the ads on my sidebar to separate them visually, as you can see in the screenshot to the right. I’ve also used padding to put space between that screenshot and this text! We’ll learn how to float text next to images, as in this paragraph, next week.

Now let’s learn how to add padding with code!

You can add padding to any side of an element. Here are the padding properties that allow you to define which sides of the element you’d like to pad:

  • padding-bottom | Sets the bottom padding of an element
  • padding-left | Sets the left padding of an element
  • padding-right | Sets the right padding of an element
  • padding-top | Sets the top padding of an element

Define the size of the padding by adding the pixel size after the padding property:


Separate each property you’d like to use with a semi-colon:

padding-top:10px; padding-right:10px;

Define the padding in the image style attribute section of your element code. Don’t forget to begin and end with quotation marks:

<img style="padding-top:10 px; 
padding-right:10px;" />

An example of image code with 10 pixels of padding on each side:

<a href="http://www.thedestinationlink.com">
<img style="padding-top:10px; padding-bottom:10px; 
padding-right:10px; padding-left:10px;" 
src="http://www.thelinktotheimagesourcegoeshere.jpg" />

Note that, when you put two images with padding by each other, the space between them is the sum of their adjacent padding. For instance, I use a padding of 10 pixels at the bottom of each of the ads of the images on my sidebar. If there were also 10 pixels of padding on the top of the images, there would appear to be 20 pixels of space between each ad. This means that the same look could be accomplished by adding a padding of 5 pixels to both the top and bottom of each ad. Think of padding as an invisible frame around your elements!

Good luck with your padding! It may take you a few tries to remember this. When I first learned, I had a cheat sheet I could go back to so I could copy and past the code format. Use this post as a cheat sheet until you get the hang of using padding!

Come back next week to learn about floating, so you can have images side by side and can wrap text to the side of photos!

Want to learn more coding and tech tricks for blogging? Check out these posts:

What blogging code tricks would you love to learn?