zur Beschreibung

Unerklärliche Lücken zwischen Elementen: Full Standards Mode

Graphisches Navigationsmenü (Liste mit Bildern)

Liste ohne besondere Style-Eigenschaften

Die margin- und padding-Eigenschaften dieser Listenelemente haben jeweils den Wert 0. Darüber hinaus werden keine besonderen Formatierungen vorgenommen. Bei standardkonformer Interpretation des Codes liegen die Bilder auf der Basislinie und erzeugen Lücken unterhalb der Bilder. Die Darstellung der Graphiken in Listenelementen hängt nur in Opera, Safari und Konqueror vom Darstellungsmodus ab. In Mozilla und Internet Explorer werden die Graphiken generell auf der Basislinie positioniert.

li {
  margin:0;
  padding:0;
}

Ausrichtung der Bilder über vertical-align:bottom

Die Bilder dieser Liste werden über vertical-align:bottom am unteren Rand der Line-Box ausgerichtet. Es entstehen daher keine Lücken. Prinzipiell wäre auch eine Formatierung der Bilder mit display:block möglich, jedoch erzeugt dieses im Internet Explorer zusätzlichen Aufwand.

li {
  margin:0;
  padding:0;
}

li img {
  vertical-align:bottom;
}

Bilderrahmen (Tabelle mit Bildern)

Nur zu Demonstrationszwecken wird das Problem an dieser Stelle anhand von so genannten »Tabellenlayouts« geschildert, da das Problem hier besonders häufig in Erscheinung tritt. Auf modernen Seiten sollten diese allerdings keine Verwendung mehr finden. Die hier vorgestellten Lösungen können aber natürlich problemlos auf jedes andere HTML-Element übertragen werden.

Tabelle ohne besondere Style-Eigenschaften

Die Eigenschaft border-collapse dieser Tabelle hat den Wert collapse. Die padding-Eigenschaft der Tabellenzellen hat den Wert 0. Rahmen für die Tabellenzellen verdeutlichen die tatsächliche Zellengröße. Darüber hinaus werden keine besonderen Formatierungen vorgenommen. Bei standardkonformer Interpretation des Codes liegen die Bilder auf der Basislinie und erzeugen Lücken unterhalb der Bilder. Da die Bilder im Vergleich zur Zeilenhöhe relativ klein sind, kommt es nun auch zu Lücken oberhalb der Bilder.

table {
  border-collapse:collapse;
}

td {
  padding:0;
  border: 1px dotted #000;
}
Sherry

Formatierung der Bilder als Block-Element

Wenn die Bilder jeweils einzeln in einem Element liegen, so können die Bilder mit display:block als Block-Element formatiert werden. Dadurch erzeugt ein Bild keine Line-Box mit dazugehöriger Basislinie mehr. Gleichzeitig passt sich die Höhe des umschließendes Elementes, in diesem Fall eine Tabellenzelle, an die Höhe des Bildes an. Es treten keine Lücken auf. Diese Methode ist nicht geeignet, wenn Bilder gleichzeitig auch nebeneinander angeordnet werden sollen, da sonst durch die Block-Formatierung automatisch ein Zeilenumbruch erzeugt wird.

table {
  border-collapse:collapse;
}

td {
  padding:0;
  border: 1px dotted #000;
}

td img {
  display:block;
}
Sherry

Formatierung über die line-height des umschließenden Blockes

Die CSS-Eigenschaft line-height beschreibt die minimale Höhe einer Line-Box. Durch sie wird auch der minimale Abstand zwischen Basislinie und oberem bzw. unterem Rand der Line-Box bestimmt. Wird der Wert von line-height des Container-Elementes, in diesem Fall die Tabellenzellen, verkleinert, so wird die Basislinie weiter zum unteren Rand der Line-Box verschoben. Wird der Wert klein genug gewählt, so fallen Basislinie und der untere Rand zusammen. Zwischen untereinander angeordneten Bildern werden keine Lücken mehr auftreten. Diese Methode zeigt im Internet Explorer und im Konqueror ab Version 3.4 keine Wirkung.

table {
  border-collapse:collapse;
}

td {
  line-height:1px;
  padding:0;
  border: 1px dotted #000;
}
Sherry

Ausrichtung der Bilder über vertical-align:bottom

Wenn die Bilder zu klein sind, versagt die Methode, die Lücken über die Ausrichtung der Bilder am unteren Rand der Line-Box zu schließen, da durch die line-height eine Mindesthöhe der Line-Box vorgegeben wird.

table {
  border-collapse:collapse;
}

td {
  padding:0;
  border: 1px dotted #000;
}

td img {
  vertical-align:bottom;
}
Sherry