How To Add Padding or Margin to an Image in WordPress

New to DearBlogger? Welcome! You can find pretty much all the blogging advice here in video format on our YouTube Channel. Also FYI on DearBlogger.com we can now fix or create your blog for you. Thanks for stopping by!

Recently we wanted to add padding to banner ad image in a blog post. But the web didn’t yield many helpful results for an old bat like me, so I figured why not write our own guide to add padding image margin image etc etc again!

The best way to add padding or margin to an image in WordPress is using a class. Using a class is the way developers recommend for the most flexibility and control. You can also turn the css “off” quicker if you need to.

Here’s an example of an image without padding or margin

Ham hock jerky kevin, buffalo turkey tail pork belly strip steak hamburger chicken doner pork chop short ribs. Tenderloin pork cow, salami drumstick ham hock shank short ribs pancetta swine hamburger pork chop. Tenderloin kielbasa beef ribs, burgdoggen pork bacon flank buffalo pork chop spare ribs. Chicken spare ribs hamburger pork loin kevin ribeye tenderloin beef filet mignon. Shankle kevin burgdoggen beef sausage. Kevin flank t-bone, bresaola brisket hamburger shoulder shankle tenderloin chuck meatloaf sirloin tongue.

Here’s an example of an image with padding

Here’s an example of an image with margin

Padding image in HTML

<img src="https://dearblogger.org/wp-content/uploads/2018/05/bloggerconnect-300x200.jpg" 
alt="add padding image" width="300" height="200" class="padthatimage" />

Padding CSS

.padthatimage {
  padding: 20px;
  float: right;
  margin-left: 1.5em;
}

Margin image in HTML

<img src="https://dearblogger.org/wp-content/uploads/2018/05/bloggerconnect-300x200.jpg"
alt="adding margin image" width="300" height="200" class="marginthatimage" />

Margin CSS

.marginthatimage {
  margin: 20px;
  float: right;
  margin-left: 1.5em;

Things you must note!

There are a couple things you must note, or be forever confused, so please note them:

As WordPress images often come with a class like class=”alignleft blah blah blah” we have deleted what’s inside that class to write our own. Because we deleted the align left blah blah blah part, I went into our theme’s style.css file and found what exactly that CSS code did, which is the float right and margin left part, and added that in so we don’t lose any of the image’s inherent and usually beautiful css.

Deep breath.

Next just awknowledge the difference between margin and padding and none of those above. Margin will push the text outwards because margin is added space outside the image’s border, while padding will do the opposite. Padding is added space inside the image’s border, and will appear to shrink the image at times, like above. Pick your poison!

How’s it going for you?

Were you able to add padding to an image or add margin to an image successfully? If so, did you enjoy this short guide? If not, what questions do you still have? I’d be more than happy to help your in the comments.