HTML vspace Attribute

HTML vspace Attribute

The obsolete HTML vspace attribute was historically used to add vertical space above and below certain elements, including images and embedded content.

Historical Syntax

The vspace attribute used a numeric value to specify the amount of vertical space placed above and below an element.

<img src="image.jpg" alt="Garden flowers" vspace="20">

In this example, the browser added 20 pixels of space above the image and another 20 pixels below it.

Historical Elements

The vspace attribute was historically used with several elements that displayed images or embedded content.

Historical Use

The vspace attribute provided a simple way to prevent surrounding content from appearing directly against the top or bottom of an image or embedded resource.

<p>Content above the image.</p>

<img src="image.jpg"
     alt="Garden flowers"
     vspace="20">

<p>Content below the image.</p>

The same amount of spacing was applied above and below the element. Authors could not use vspace to assign different values to the top and bottom.

The related obsolete hspace attribute performed a similar function horizontally by adding space to the left and right sides of an element.

Why It Became Obsolete

The vspace attribute controlled visual presentation directly in HTML markup. Modern webpages use CSS to separate spacing and other presentation from the document's structure and content.

CSS margins are also more flexible because the top and bottom margins can be controlled independently, shared styles can be reused across multiple elements, and spacing can be changed for different layouts and screen sizes.

Modern Alternative

Use CSS margins instead of the obsolete vspace attribute. The margin-top and margin-bottom properties provide direct control over the space above and below an element.

Historical HTML

<img src="image.jpg"
     alt="Garden flowers"
     vspace="20">

Modern CSS

img {
  margin-top: 20px;
  margin-bottom: 20px;
}

When the same amount of space is needed above and below the element, the CSS margin-block property can also be used.

img {
  margin-block: 20px;
}

Unlike vspace, CSS also makes it easy to use different amounts of space above and below an element.

img {
  margin-top: 10px;
  margin-bottom: 30px;
}

Learn More About CSS Spacing

The CSS tutorials explain how margins and the box model control spacing around elements:

• CSS Margins - Control the space outside an element's border.
• CSS Box Model - Learn how content, padding, borders, and margins work together.

Legacy Browser Support

The vspace attribute was recognized by older browsers and was commonly used with images and other embedded content.

Browsers may continue to recognize some historical uses when displaying legacy webpages, but the attribute is obsolete and should not be used in new or updated HTML. 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 attributes historically used to control spacing around elements and document content include:

• hspace - Historically added horizontal space to the left and right sides of certain elements.
• topmargin - Historically controlled spacing along the top of the document.
• bottommargin - Historically controlled spacing along the bottom of the document.
• leftmargin - Historically controlled spacing along the left side of the document.
• rightmargin - Historically controlled spacing along the right side of the document.

Specifications

The vspace attribute is obsolete and should not be used in modern HTML. CSS margins should be used to control vertical spacing around elements. See the WHATWG HTML Living Standard for information about obsolete and non-conforming features.