Padding around an image?
- Thread starter Kal K
- Start date
Marc van Leeuwen
Premium Member
- Joined
- May 29, 2016
- Messages
- 1,132
- Points
- 63
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">Normally, a web design will do this
Code:
<style type="text/css">
.imgclass {padding:10px;}
</style>
Code:
<img class="imgclass" src="link_to_your_image.jpg">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.
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:
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.
Code:
<img style="padding:10px;" src="link_to_your_image.jpg">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)
}
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.
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.
Older threads
Newer threads
Latest threads
Recommended threads
Similar threads
Referral contests
-
Refer Your Friends to WebmasterSun to Win Cash and Prizes!
$100 to your Paypal
300 Trophy Points
1 banner ad 728x 90
Referral link for :
