vspace and hspace in <img> – Long Answer Questions
Medium Level (Application & Explanation)
Q1. Explain the purpose of the vspace attribute in the <img> tag. Show how to achieve the same effect in HTML5.
Answer:
- The vspace attribute adds vertical space above and below an image.
- It helps when text or other elements are too close to the image vertically.
- Example:
<img src="tree.jpg" vspace="20"> gives 20px above and below.
- It is deprecated in HTML5, so modern code should not use it.
- Use CSS margin instead:
style="margin:20px 0;" for top and bottom.
- This keeps code clean, valid, and easy to maintain.
Q2. What does the hspace attribute do? Explain with an example and its CSS alternative.
Answer:
- The hspace attribute adds horizontal space on the left and right of an image.
- It prevents text from touching the image sideways.
- Example:
<img src="book.jpg" hspace="30" align="left"> keeps a 30px gap.
- It is deprecated in HTML5, so avoid it in new code.
- Use CSS margin instead:
style="margin:0 30px;" for left and right.
- This gives the same effect and is standards-compliant.
Q3. Compare vspace and hspace with CSS margins. Why is CSS preferred today?
Answer:
- vspace and hspace are HTML attributes for spacing around images.
- CSS margins do the same job but in a separate styling layer.
- CSS keeps structure (HTML) and style (CSS) separate.
- This makes pages easier to update and reuse styles.
- HTML5 marks vspace and hspace as deprecated, so validators may warn.
- CSS is flexible, supports responsive design, and is future-proof.
Q4. Write code to add both vertical and horizontal space using old attributes and explain the layout.
Answer:
- Example:
<img src="flower.jpg" vspace="20" hspace="30" width="200">.
- This adds 20px space above and below the image.
- It also adds 30px space on the left and right sides.
- Text will not touch the image from any side.
- But this is not recommended in HTML5 as it is deprecated.
- Use CSS instead for the same and better control.
Q5. How can you give 20px vertical and 30px horizontal space around an image using CSS?
Answer:
- Use CSS margin shorthand with two values.
- Example:
<img src="rose.jpg" style="margin:20px 30px;" width="200">.
- Here, the first value 20px is for top and bottom.
- The second value 30px is for left and right.
- This fully replaces vspace and hspace in HTML5.
- It is clean, valid, and easy to reuse with classes.
High Complexity (Analysis & Scenario-Based)
Q6. Your school website uses vspace and hspace everywhere. Plan how to convert it to CSS without breaking the layout.
Answer:
- First, identify all images using vspace or hspace.
- Create CSS classes, like
.img-pad { margin:20px 30px; }.
- Replace attributes with
class="img-pad" in the <img> tags.
- Keep the same numbers for margin to match old spacing.
- Test pages to ensure text still wraps and spacing looks correct.
- Remove deprecated attributes to make code HTML5-compliant.
Q7. An image is aligned left, but text touches it. hspace does nothing in HTML5. Diagnose and fix.
Answer:
- The issue is that hspace is deprecated and may be ignored.
- The text touches the image because there is no horizontal margin.
- Add CSS like
img.left { float:left; margin:0 30px 20px 0; }.
- Apply it:
<img src="book.jpg" class="left" alt="Book">.
- This adds right margin to keep text away from the image.
- It works in HTML5 and is reliable across browsers.
Q8. A designer used vspace="10" and hspace="15" on many images. Show an HTML5-safe replacement using classes.
Answer:
- Create a class:
.img-gap { margin:10px 15px; }.
- This sets 10px vertical and 15px horizontal spacing.
- Update HTML:
<img src="pic.jpg" class="img-gap" alt="Pic">.
- This replaces both vspace and hspace at once.
- It keeps code clean and consistent across pages.
- Future changes need only editing the CSS, not every image.
Q9. A student says, “My vspace works in one browser but not in another.” Explain why and suggest a stable approach.
Answer:
- Deprecated features can be inconsistently supported by browsers.
- Some browsers still read vspace, others ignore it.
- This causes uneven spacing across devices and users.
- The stable fix is to use CSS margins for spacing.
- Example:
style="margin:20px 0;" for vertical spacing.
- This is standard, predictable, and HTML5-safe.
Q10. In an exam, you are asked about vspace and hspace. Write a balanced answer that also shows modern practice.
Answer:
- State that vspace adds vertical space and hspace adds horizontal space around images.
- Mention they are deprecated in HTML5 but still asked in exams.
- Provide an old-style example with values in pixels.
- Then show the CSS alternative using
margin: vertical horizontal;.
- Explain that CSS is the recommended and valid method now.
- This shows concept clarity and modern awareness to the examiner.