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;
}
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;
}
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.
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;
}
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;
}
line-height
des umschließenden BlockesDie 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;
}
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;
}