🖼️ `vspace` and `hspace` Attributes of `<img>`

In HTML, when you insert an image, sometimes the text sticks too close to the image. To avoid this, older HTML provided the vspace (vertical space) and hspace (horizontal space) attributes.

👉 These attributes add blank space (margin) around the image. 👉 They are now deprecated in HTML5 (we use CSS margin instead), but still important for exams.

✅ 1. `vspace` Attribute

Stands for vertical space.
Adds blank space above and below the image.
Helps to separate the image vertically from the text.

Example:

<img src="tree.jpg" alt="Tree" vspace="20" width="200" />
<p>
  This paragraph will appear below the tree image with 20 pixels vertical space.
</p>

Here, there will be 20 pixels of space above and below the tree image.

✅ 2. `hspace` Attribute

Stands for horizontal space.
Adds blank space to the left and right of the image.
Helps to keep text from touching the image horizontally.

Example:

<img src="book.jpg" alt="Book" hspace="30" width="150" align="left" />
<p>
  This is a book image aligned left, but there will be 30 pixels of space
  between the book and the text on the right.
</p>

Here, the text will not touch the image — instead, it will keep a 30-pixel gap on both sides.

🚨 Note

Both vspace and hspace are deprecated in HTML5.
In modern HTML, we use CSS margin:

CSS Example:

<img src="flower.jpg" alt="Flower" style="margin:20px 30px;" width="200" />

👉 This gives 20px vertical space and 30px horizontal space.

🌟 Quick Recap Table

Attribute	Meaning	Effect
`vspace`	Vertical space	Adds space above and below the image
`hspace`	Horizontal space	Adds space left and right of the image

✨ Exam Answer (3 marks)

The vspace and hspace attributes of the <img> tag are used to add blank space around an image.

vspace adds vertical space above and below.
hspace adds horizontal space on left and right. Though not supported in HTML5, the same effect can be created using CSS margins.

🖼️ vspace and hspace Attributes of <img>