Signatur
Beschreibung
Die Eigenschaft vspace des Interfaces HTMLImageElement gibt an, wie viele Pixel Leerraum oberhalb und unterhalb eines Bildes freigehalten werden. Sie spiegelt das gleichnamige, veraltete HTML-Attribut vspace wider. Der Wert ist eine nicht-negative Ganzzahl vom Typ number.
Browser übersetzen das Attribut intern in die CSS-Eigenschaften margin-top und margin-bottom (als sogenannten „presentational hint“). Ein ausdrücklich gesetzter CSS-Rand hat deshalb Vorrang vor vspace.
Die Eigenschaft stammt aus der Zeit vor CSS und ist im HTML-Standard als veraltet eingestuft. Sie ist nur noch sinnvoll, wenn man alten Code pflegt oder Altbestände an Markup auswertet. In neuem Code setzt man stattdessen margin-block bzw. margin-top/margin-bottom per CSS oder über element.style.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | number | 0 | Beim Schreiben: Anzahl der Pixel für den vertikalen Abstand. Der Wert wird zu einer vorzeichenlosen Ganzzahl umgewandelt und in das Attribut vspace geschrieben. |
Rückgabewert
vspace als Ganzzahl in Pixeln. Fehlt das Attribut oder ist es ungültig, wird 0 zurückgegeben.Beispiele
vspace auslesen und setzen
const img = document.createElement('img');
img.src = 'logo.png';
console.log(img.vspace); // kein Attribut vorhanden
img.vspace = 12;
console.log(img.vspace);
console.log(img.getAttribute('vspace'));
document.body.append(img);Altes Markup auf CSS umstellen
// Alle Bilder mit vspace-Attribut finden und auf margin-block umstellen
const migrateVspace = () => {
for (const img of document.querySelectorAll('img[vspace]')) {
const px = img.vspace;
img.style.marginBlock = `${px}px`;
img.removeAttribute('vspace');
console.log(`Migriert: ${img.src} -> ${px}px`);
}
};
migrateVspace();Moderne Alternative ohne vspace
const img = new Image(200, 100);
img.src = 'banner.png';
// Statt img.vspace = 8:
img.style.marginTop = '8px';
img.style.marginBottom = '8px';
document.body.append(img);
console.log(getComputedStyle(img).marginTop);// Wichtig · Fallstricke
- Veraltet:
vspaceist im HTML-Standard als obsolet markiert. Validatoren melden das Attribut als Fehler. Nutze CSS (margin-block,margin-top,margin-bottom). - CSS hat Vorrang: Das Attribut wirkt nur als presentational hint. Jede CSS-Regel für
margin-top/margin-bottomüberschreibt es, auch eine mit geringer Spezifität. - Negative oder ungültige Werte: Der Wert wird als vorzeichenlose Ganzzahl (
unsigned long) behandelt. Nicht-numerische Attributwerte liefern beim Lesen0. Wie sich das Zuweisen negativer Zahlen auswirkt, ist in älteren Browsern nicht einheitlich. - Nur Pixel: Prozentwerte oder Einheiten wie
emsind nicht möglich. - Kompatibilität: Wird aus Gründen der Rückwärtskompatibilität von allen gängigen Browsern (Chrome, Firefox, Safari, Edge) weiterhin unterstützt. Man sollte sich aber nicht darauf verlassen, dass das dauerhaft so bleibt.