Padding around an image?

Kal K

Member
Joined
Feb 2, 2015
Messages
50
Points
8
Is there an HTML attribute to put padding around an image? I am getting confused when I could not have a padding around an image on my web page. Can anyone guide me?
What are the best ways to do this as a professional web designer?
 

ron13315

Member
Joined
Jul 23, 2014
Messages
280
Points
18
can you make it clear what are you trying to achieve? or do mean you want margin or space around your image.

try to drop this in your style sheet.

body img {padding: 10px;}
 

Marc van Leeuwen

Premium Member
Joined
May 29, 2016
Messages
1,113
Points
63
Is there an HTML attribute to put padding around an image? I am getting confused when I could not have a padding around an image on my web page. Can anyone guide me?
As a newbie used to do to make a pading around her/his image is

Code:
<img style="padding:10px;" src="link_to_your_image.jpg">
Mean that your image will have a padding 10px beside other web elements

What are the best ways to do this as a professional web designer?
Normally, a web design will do this

Code:
<style type="text/css">
.imgclass {padding:10px;}
</style>
and in their web page, they will include this

Code:
<img class="imgclass" src="link_to_your_image.jpg">
If you don't want to use a CSS class for your image, you can make it for the DIV which contains your image, it also do the same function.

Hope it helps!
 

Mike001

New member
Joined
Apr 27, 2016
Messages
578
Points
0
The best way to pad an image on a web page is through the CSS file.

Code:
<img style="padding:10px;" src="link_to_your_image.jpg">
NEVER, NEVER, NEVER use inline styles as is demonstrated above. Marc you should be ashamed for even suggesting that. It is no longer an accepted practice with any real web developer. The reasons are far too many to mention in a post.

Assign a class to the tag, something like this. <img class="myimage" src="you path to the image">

Then in your CSS file assign the padding you need to that class name.

Like this:

Code:
.myimage {
     padding: 10px 5px 11px 12px; Explanation of setting:(top, right, bottom, left)
}
There are some CSS short cuts for entering padding but if you understand the way I wrote it above you probably already know the shortcuts.
 

joed77

New member
Joined
Aug 1, 2017
Messages
54
Points
0
Try this:
Code:
<!DOCTYPE html>
<html>
<body>


<h4>Padding around an image with hspace:</h4>
<p><img src="picture.gif" alt="picture info" width="42" height="42" align="middle" hspace="20">Is there an HTML attribute to put padding around an image? I am getting confused when I could not have a padding around an image on my web page. Can anyone guide me?
What are the best ways to do this as a professional web designer? </p>


</body>
</html>
 

Mike001

New member
Joined
Apr 27, 2016
Messages
578
Points
0
Joed77,

Never suggest that a developer put in line styles into the attributes of an HTML element. Not only does it not follow "Best Practices", it is very difficult to maintain the pages, it can lead to problems in the SEO and numerous other violations of the specifications. Developers are moving away from those practices at light speed.

That kind of coding went out years ago and is no longer an accepted practice. All styling is to be handled in CSS. HTML is for structure of the web page, CSS is for styling of the web page. Padding and spacing are considered part of the styling specification and not part of the structure.

The W3C has numerous articles on that very topic. Professional developers should make themselves familiar with those specifications, not only for the benefit of themselves but also for their clients.

You may want emphasize the height and width attributes of the image as this can speed up page loading. Again many developers leave these out also. Not a good practice.

The align attribute and hspace attribute are deprecated in HTML5 and it is highly recommended that they not be used. Many newer version of browsers will not support those attributes and as such your page will not display as intended if they are configured in the HTML element.

Thank you for using the alt attribute with a picture description, many developers do not and by leaving it our actually hurt their clients SEO.
 

joed77

New member
Joined
Aug 1, 2017
Messages
54
Points
0
Sorry sir, I will never use hspace, I new it wouldn't work with HTML5, what was I thinking?:bash:
 

Mike001

New member
Joined
Apr 27, 2016
Messages
578
Points
0
No problem bud, I just wanted to make sure the new guys trying to learn this stuff are getting good information. Those are the future and I want them to be successful....

Didn't mean to sound like I was preaching.
 
Older threads
Replies
3
Views
1,465
Replies
4
Views
2,604
Latest threads
Replies
1
Views
77
Replies
1
Views
174
Replies
4
Views
381
Replies
11
Views
523
Replies
2
Views
228
Recommended threads
Replies
5
Views
3,808
Replies
16
Views
8,903
Replies
3
Views
1,414
Replies
0
Views
2,240

Latest postsNew threads

Referral contests

Referral link for :

Sponsors

Popular tags

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top