HTML hspace Attribute

Introduction

The hspace attribute is an HTML feature used to define horizontal space around an element. It adds padding-like spacing on the left and right sides, which helps separate images and embedded content from surrounding text. While still recognized by many browsers, it is deprecated in HTML5—CSS margin is the modern replacement.

What You’ll Learn

Purpose of hspace Attribute

The main purpose of the hspace attribute is to specify the amount of horizontal space, in pixels, added on both the left and right sides of an element. This attribute is commonly used with images and embedded objects to adjust their positioning within a layout and keep text from sitting flush against the element.

For example, an image with hspace="20" gets 20 pixels of space on its left edge and 20 pixels on its right edge—similar to setting margin-left: 20px and margin-right: 20px in CSS.

📝 Syntax

Add hspace to a supported element with a non-negative pixel value:

<img src="example.jpg" alt="Example Image" hspace="20">

Syntax Rules

• Value is a non-negative integer representing pixels of horizontal space on both left and right sides.
• Historically used on <img>, <object>, and <iframe> elements.
• Pair with vspace for vertical spacing above and below the element.
• Deprecated in HTML5—use CSS margin-left and margin-right for new code.
• Does not replace meaningful alt text or semantic markup on images.

💎 Values

The hspace attribute accepts a numerical value representing the amount of horizontal space, in pixels, to be added on each side of the element:

• hspace="0" — No extra horizontal space (default behavior).
• hspace="10" — 10 pixels of space on the left and 10 pixels on the right.
• hspace="20" — 20 pixels of space on each side; a common choice for image spacing.

Values should be zero or positive integers. Negative values are not meaningful for hspace and should not be used.

<!-- Legacy HTML spacing -->
<img src="photo.jpg" alt="Photo" hspace="15" vspace="10">

<!-- Modern CSS equivalent (recommended) -->
<img src="photo.jpg" alt="Photo" style="margin: 10px 15px;">

Applicable Elements

hspace vs vspace vs CSS margin

Examples Gallery

Basic image spacing, comparison with CSS margin, and dynamic hspace updates with JavaScript.

👀 Live Preview

Image with horizontal spacing (CSS margin shown as the modern equivalent of hspace):

This text sits next to the image with horizontal space on both sides of the image, keeping the layout readable and visually balanced.

Preview uses CSS margin-right: 20px (the modern equivalent of hspace="20").

Example — Basic Image Spacing

Let’s illustrate how to use the hspace attribute with an image:

hspace.html

Copy

<img src="example.jpg" alt="Example Image" hspace="20">

View Output Try It Yourself

📤 Output:

Text flows beside the image with 20 pixels of horizontal space on each side of the image.

hspace="20" adds 20 px on the left and 20 px on the right.

How It Works

In this example, the hspace attribute is set to 20, indicating that 20 pixels of horizontal space should be added on both sides of the image, separating it from adjacent content.

Example — CSS Margin Alternative (Recommended)

Achieve the same spacing with modern CSS instead of the deprecated attribute:

hspace-css.html

Copy

<img
  src="example.jpg"
  alt="Example Image"
  style="margin-left: 20px; margin-right: 20px;">

<!-- Or with a class -->
<style>
  .spaced-img { margin: 0 20px; }
</style>
<img class="spaced-img" src="example.jpg" alt="Example Image">

View Output Try It Yourself

📤 Output:

Same visual result using CSS margin instead of the deprecated hspace attribute.

How It Works

margin-left and margin-right (or the shorthand margin: 0 20px) replicate hspace="20" with full CSS control over responsive breakpoints, units, and design systems.

Dynamic Values with JavaScript

You can dynamically set the hspace attribute using JavaScript to adjust spacing based on conditions or user interactions:

dynamic-hspace.html

Copy

<img id="dynamicImage" src="example.jpg" alt="Example Image">

<script>
  document.getElementById("dynamicImage").hspace = "10";
</script>

View Output Try It Yourself

📤 Output:

hspace set to 10 via JavaScript.

How It Works

In this script, the hspace attribute is set to 10 for an image with the id dynamicImage. For new code, prefer updating element.style.marginLeft and marginRight or toggling a CSS class instead.

♿ Accessibility

• Spacing is visual only — hspace affects layout appearance but does not convey meaning to assistive technologies.
• Always include alt text — Horizontal spacing on images does not replace descriptive alternative text for screen reader users.
• Prefer CSS for responsive layouts — Fixed pixel spacing from hspace may not adapt well on small screens; CSS media queries handle this better.
• Avoid layout-only attributes for structure — Use semantic HTML and CSS for spacing rather than deprecated presentational attributes when building accessible pages.

💡 Best Practices