Padding around the image means the blank space around the image. If you’re attaching an image to your website using HTML, then you would need to add padding around it, and here in this post, I will guide you on how to do so. I’ve 2 very simple methods to add padding around the image in HTML.
Here’s How to Add Padding Around the Image in HTML
The two simple methods for setting up the padding around the image in HTML are the following:
Method #1: Using hspace and vspace Attributes
Both of these attributes are used to specify the whitespace around the image. The hspace puts white space on left and right side of an image whereas vspace attribute specifies white space on the top and bottom sides of an image.
Here’s the syntax of using hspace and vspace attributes:
<img hspace="pixels" vspace="pixels">
Now, here’s an example of an image with 20 pixels of padding around it with the help of hspace and vspace attributes:
<p><img src="example.gif" alt="Alternative Text" width="42" height="42" align="middle" hspace="20" vspace="20">This is some text. This is some text. This is some text.</p>
Just use this syntax to add padding or margin around the image. Isn’t it easy to add padding around image using hspace and vspace attributes?
But, before using it anywhere you should be careful of its compatibility issues. Both of these attributes of <img> are not supported in HTML5. So, you can use CSS instead. And the second method is all about setting up the padding around the image using CSS.
Method #2: Using CSS Padding Property
As I above told you hspace and vspace attributes don’t work in HTML5 but CSS works in almost every new technology.
Here’s an example of using padding property in HTML inside <img> tag:
<img style="float: left; padding: 15px 5px 10px 20px;" src="example.jpg"/>
The padding
property can have from one to four values.
padding: 25px 50px 75px 100px;
- top padding is 25px
- right padding is 50px
- bottom padding is 75px
- left padding is 100px
padding: 25px 50px 75px;
- top padding is 25px
- right and left paddings are 50px
- bottom padding is 75px
padding: 25px 50px;
- top and bottom paddings are 25px
- right and left paddings are 50px
padding: 25px;
- all four paddings are 25px
MUST READ: Real Time HTML Editors With Preview
That’s all guys! I hope with the help of this article you will be able to add padding around any image in HTML. Let me know which method you like more. Or is there anybody who wanna share any other method for the same? Our comment box is waiting for you. 😉
It’s nice. Both of these methods are good to add padding around the image but still I mostly prefer the first method as it’s simplest one.
Hi Javed,
You should know the fact that hspace and vspace attributes doesn’t support in HTML5.
So, according to me you should go with CSS Padding Property to make it able to work in every conditions.