HTML hspace Attribute

HTML hspace Attribute

The obsolete HTML hspace attribute was historically used to add horizontal space to the left and right sides of elements such as images and embedded objects.

Historical Syntax

The hspace attribute accepted a numeric value representing the amount of horizontal space placed on both sides of an element:

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

In this example, the browser was requested to place 20 pixels of horizontal space on both the left and right sides of the image.

Historical Elements

The hspace attribute was historically associated with several elements used for images and embedded content.

Historical Use

The hspace attribute was commonly used when an image or embedded object appeared next to surrounding content. Without additional spacing, text could appear very close to the edge of the element.

For example, an author could use hspace="15" to request 15 pixels of empty space on both horizontal sides of an image. The same value was applied to the left and right sides, so the attribute did not provide independent control over each side.

The related obsolete vspace attribute performed a similar function vertically by adding space above and below an element.

Why It Became Obsolete

The hspace attribute controlled visual presentation rather than the structure or meaning of the document. As CSS became the standard method for styling webpages, presentational spacing attributes were no longer necessary.

CSS margins are more flexible because the left and right margins can be controlled together or independently. CSS also allows spacing rules to be reused across many elements without repeating presentational values throughout the HTML.

Modern Alternative

Use CSS margins instead of the obsolete hspace attribute. The margin-left and margin-right properties provide direct control over horizontal spacing.

Historical HTML

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

Modern HTML and CSS

<img class="spaced-image" src="image.jpg" alt="Example">

<style>
.spaced-image {
  margin-left: 20px;
  margin-right: 20px;
}
</style>

The CSS margin-inline property can also set the margins on both inline sides of an element:

.spaced-image {
  margin-inline: 20px;
}

Unlike the old hspace attribute, CSS can also give each side a different amount of space when the design requires it.

Learn More About CSS Margins

The CSS tutorials explain how margins create space around elements and how they fit into the CSS box model:

• CSS Margins - Learn how to control the space outside an element.
• CSS Box Model - Learn how content, padding, borders, and margins work together.

Legacy Browser Support

The hspace attribute was recognized by older browsers as a presentational method for adding horizontal space around images and some types of embedded content.

Modern browsers may continue to render some legacy uses of hspace for compatibility with older webpages, but new and updated webpages should use CSS margins instead.

For additional information about historical browser compatibility, visit Can I Use? . Search for the HTML element or attribute you want to check. Search results can include related HTML features, element attributes, APIs, and other technologies, so select the result that most closely matches the legacy feature you are researching.

Related Attributes

Other obsolete HTML attributes historically used to control spacing around content include:

• vspace - Historically used to add vertical space above and below an element.
• leftmargin - Historically used to control the left margin of a document.
• rightmargin - Historically used to control the right margin of a document.
• topmargin - Historically used to control the top margin of a document.
• bottommargin - Historically used to control the bottom margin of a document.

Specifications

The hspace attribute is obsolete and spacing around elements should be controlled with CSS. See the WHATWG HTML Living Standard for information about obsolete and non-conforming features.