Attribute of
<img>
What does <img hspace=""> do?
Previously used to add horizontal space on both side of an image. It is now deprecated.

Code Example

<!-- This feature is deprecated. The following example may not work in all browsers. -->

<!-- WITHOUT hspace -->
<img src="/wp-content/uploads/small-flamingo.jpg"><img src="/wp-content/uploads/small-flamingo.jpg">

<br><br>

<!-- WITH hspace -->
<img src="/wp-content/uploads/small-flamingo.jpg" hspace="20"><img src="/wp-content/uploads/small-flamingo.jpg" hspace="20">


The Old Way to Control Image Spacing

Prior to the HTML5 specification, you could control the spacing around an image using the hspace (horizontal space) and 'vspace' (vertical space) attributes. This was particularly important if you were wrapping text around images using the (also deprecated) align attribute, as the default display behavior caused the text to collide with the edge of the image in a really unattractive way.

<!-- DEPRECATED. May not work in all browsers. -->  <img src="/wp-content/uploads/flamingo.jpg" align="left"> This text will flow to the right of the image, but it will not look very good because there is no margin or spacing on the image or the text. This problem can be solved using the deprecated <code>hspace</code> attribute, but a better approach would be to use CSS to put margins on the image. 
This text will flow to the right of the image, but it will not look very good because there is no margin or spacing on the image or the text. This problem can be solved using the deprecated hspace attribute, but a better approach would be to use CSS to put margins on the image.
<!-- DEPRECATED. May not work in all browsers. -->  <img src="/wp-content/uploads/flamingo.jpg" align="left" hspace="20"> This text will also flow to the right of the image, but it will look better, because there is space added to the side of the image, using the deprecated <code>hspace</code> attribute. But now we have another problem — I don't want space on the other side of the image! This is one of many reasons why CSS margins are better. 
This text will also flow to the right of the image, but it will look better, because there is space added to the side of the image, using the deprecated hspace attribute. But now we have another problem — I don't want space on the other side of the image! This is one of many reasons why CSS margins are better.

The Right Way (with CSS)

The right way to add appropriate spacing to an image (or anything else) is to use CSS. In this case, there are at least four ways to do it that will accomplish the right look:

  • margin on the image
  • margin on the text
  • padding on the image
  • padding on the text

But even though all of these will look right, only one of them is really the right way to approach it. The idea of putting the spacing on the text should raise a red flag. It doesn't make sense because that would cause the text to be spaced away from the inside of its containing element, which (presumably) is already set with the appropriate padding. Also, what element would you place the padding or margin on in order to adjust the text's spacing? A block of text is just a collection of elements: paragraphs tags, lists, unstructured text. The image is clearly the right place to think about it. So should it be the margin or the padding. Either would accomplish the same thing in this case, so the question is really about the difference between margin and padding. Margins should be used to create space between to elements. Padding should be used to create space between the edge of an element and its own contents. Since we want to create space between the text and the image, placing a margin on the image is the right way to go. Using CSS classes provides another benefit, too — we can distinguish between images placed on the right and images placed on the left, and set appropriate margins on only the side that is needed. Then we can apply those left and right classes to several images without having to repeat the same code over and over.

img {  display: block; }  img.wrap {  max-width: 70%;  margin: 30px 0px; }  img.align-right {  float: right;  margin-left: 30px; }  img.align-left {  float: left;  margin-right: 30px; } 
<img src="/wp-content/uploads/flamingo.jpg" class="wrap align-left"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida neque sed metus bibendum sagittis. Sed tempus metus ut arcu scelerisque, vitae suscipit mauris suscipit. Morbi eu sapien vel purus blandit vulputate. Sed a ante bibendum, rutrum erat et, tincidunt velit. Donec varius felis magna, sit amet elementum mi consectetur vel. Morbi non ligula ac massa pretium lacinia ac ut felis. Aenean egestas suscipit mi in fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida neque sed metus bibendum sagittis. Sed tempus metus ut arcu scelerisque, vitae suscipit mauris suscipit. Morbi eu sapien vel purus blandit vulputate. Sed a ante bibendum, rutrum erat et, tincidunt velit. Donec varius felis magna, sit amet elementum mi consectetur vel.   <img src="/wp-content/uploads/flamingo.jpg" class="wrap align-right"> Quisque scelerisque, nulla at rhoncus tempus, tortor tellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius erat mi eget tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam. Suspendisse ut suscipit odio. Ut laoreet, mi non vehicula mattis, risus mauris tempus sapien, sed porttitor felis dui nec ex. Sed porttitor sodales elit. Duis tincidunt tellus magna, efficitur consequat orci dignissim a. Fusce justo elit, efficitur eu velit in, sagittis vestibulum dolor. Donec sollicitudin, eros a venenatis malesuada, metus ante condimentum nisi, et viverra purus nisi in arcu. Donec congue est quis justo lacinia, et accumsan sapien ullamcorper. Mauris et odio ultricies nisi pellentesque aliquam. Curabitur massa eros, laoreet at dui eu, vehicula efficitur elit. Fusce imperdiet sit amet velit sed condimentum. Etiam nec augue lorem. In dignissim aliquet sem. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida neque sed metus bibendum sagittis. Sed tempus metus ut arcu scelerisque, vitae suscipit mauris suscipit. Morbi eu sapien vel purus blandit vulputate. Sed a ante bibendum, rutrum erat et, tincidunt velit. Donec varius felis magna, sit amet elementum mi consectetur vel. Morbi non ligula ac massa pretium lacinia ac ut felis. Aenean egestas suscipit mi in fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida neque sed metus bibendum sagittis. Sed tempus metus ut arcu scelerisque, vitae suscipit mauris suscipit. Morbi eu sapien vel purus blandit vulputate. Sed a ante bibendum, rutrum erat et, tincidunt velit. Donec varius felis magna, sit amet elementum mi consectetur vel. Quisque scelerisque, nulla at rhoncus tempus, tortor tellus ultricies velit, et cursus ante enim eu dolor. Sed pharetra, turpis at posuere iaculis, nunc est ultricies diam, ut varius erat mi eget tellus. Suspendisse sollicitudin tellus vel lectus ornare aliquam. Suspendisse ut suscipit odio. Ut laoreet, mi non vehicula mattis, risus mauris tempus sapien, sed porttitor felis dui nec ex. Sed porttitor sodales elit. Duis tincidunt tellus magna, efficitur consequat orci dignissim a. Fusce justo elit, efficitur eu velit in, sagittis vestibulum dolor. Donec sollicitudin, eros a venenatis malesuada, metus ante condimentum nisi, et viverra purus nisi in arcu. Donec congue est quis justo lacinia, et accumsan sapien ullamcorper. Mauris et odio ultricies nisi pellentesque aliquam. Curabitur massa eros, laoreet at dui eu, vehicula efficitur elit. Fusce imperdiet sit amet velit sed condimentum. Etiam nec augue lorem. In dignissim aliquet sem.

Not just for Text Wrapping

The other reason you might have wanted to use hsides was if you had several images next to each other, and you wanted to put some space between each one.

<!-- DEPRECATED. This may not work in all browsers. -->  <!-- Without HSPACE --> <img src="/wp-content/uploads/square-flamingo.jpg"><img src="/wp-content/uploads/square-flamingo.jpg"><img src="/wp-content/uploads/square-flamingo.jpg"><img src="/wp-content/uploads/square-flamingo.jpg"><img src="/wp-content/uploads/square-flamingo.jpg"><img src="/wp-content/uploads/square-flamingo.jpg"><img src="/wp-content/uploads/square-flamingo.jpg"><img src="/wp-content/uploads/square-flamingo.jpg">  <br><br>  <!-- With HSPACE --> <img src="/wp-content/uploads/square-flamingo.jpg" hspace="15"><img src="/wp-content/uploads/square-flamingo.jpg" hspace="15"><img src="/wp-content/uploads/square-flamingo.jpg" hspace="15"><img src="/wp-content/uploads/square-flamingo.jpg" hspace="15"><img src="/wp-content/uploads/square-flamingo.jpg" hspace="15"><img src="/wp-content/uploads/square-flamingo.jpg" hspace="15"><img src="/wp-content/uploads/square-flamingo.jpg" hspace="15"><img src="/wp-content/uploads/square-flamingo.jpg" hspace="15">  

Of course, if you want the grid to look good, you would also need to add [vspace] to get the spacing between lines right. It becomes a real pain. And even if you could take the time to do it, it would still be wrong because both of these elements are deprecated in HTML5. The right way to do this is, of course, with CSS margins. We'll also need to float the images so they line themselves up properly, and use the clearfix class to make sure the container expands to fully enclose the images. We'll make the grid container red so you can see it better.

.grid {  background-color: red;  padding: 15px; } .grid img {  display: block;  float: left;  margin: 15px; } .clearfix:after {    content: " "; /* Older browser do not support empty content */    visibility: hidden;    display: block;    height: 0;    clear: both; } 
<div class="grid clearfix"> <img src="/wp-content/uploads/square-flamingo.jpg"><img src="/wp-content/uploads/square-flamingo.jpg"><img src="/wp-content/uploads/square-flamingo.jpg"><img src="/wp-content/uploads/square-flamingo.jpg"><img src="/wp-content/uploads/square-flamingo.jpg"><img src="/wp-content/uploads/square-flamingo.jpg"><img src="/wp-content/uploads/square-flamingo.jpg"><img src="/wp-content/uploads/square-flamingo.jpg"> </div>