Bilder besser ausrichten

Kein Beitragsbild

Sollen Bilder in einem fliessenden Text montiert werden, gibt es Probleme mit dem Randabständen. Damit der Abstand gewahrt bleibt, kennt HTML die Attribute hspace=”” und vspace=””. Doch diese Methode ist grob und unbefriedigend. CSS kann es besser.

So kennen wir es. Die normale Abstandhaltung mit hspace=””

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Das Bild wird um den selben Betrag von linken Rand und vom Text weggedrückt. Das sieht nicht immer gut aus und lässt uns kaum Spielraum. CSS bietet mehr.

Ausrichtung mit padding : left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ausrichtung mit padding : right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ausrichtung mit padding in alle Himmelsrichtungen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
 <img style="padding
: 20px;" src="bild.gif" width="84" height="84">

Anzumerken bleibt, dass dies im Internet Explorer 6 nur möglich ist, wenn der DOCTYPE entsprechend deklariert wird. Ansonsten ignoriert der IE die Angaben. Opera und Mozilla machen keine Probleme.

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht