Moin,
sorry, vielleicht etwas zur Erläuterung:
img ist kein reines Inline-Element.
Genauer gesagt sind img's eine Mischung aus Inline,- und Block-Boxen und deswegen heißen sie Inline-Block-Boxen.
Im Fließtext blockiert die Grafik den nach oben benötigten Platz und schiebt die Zeilen darüber so weit weg wie nötig.
Normale Inline-Elemente tun so etwas nicht. Sie schieben nichts weg.
Das tun nur Blockelemente.
Aber die würden wiederum in einer eigenen Zeile stehen.
Inline-Block-Boxen verhalten sich gemischt:
- Sie fließen wie Inline-Boxen in einer Zeile mit
-Sie schieben aber wie Blockelelemente die Zeilen darüber und darunter so
weit auseinander, das sie selbst dazwischen passen.
Zur Gestaltung von Inline-Block-Boxen kann man bis auf zwei Ausnahmen das klassische Boxmodell benutzen:
- Ohne Angabe von width werden Inline-Block-Boxen nur so breit wie ihr
Inhalt und nicht so breit wie es geht
-Es gibt keine "collapsing Margins"
Die anderen Box-Modell-Eigenschaften height, padding und border funktionieren so wie bei Blockelementen.
(teilweise aus Peter Müllers "Little Boxes 2" zitiert, weil er so anschaulich erklären kann
)
koslowski
edit. sorry für meine Schulmeisterei, aber imho ist meine Erläuterung nicht ganz unwichtig um das img-Element im Zusammenhang mit dem Boxmodell zu verstehen.
Das wird daran liegen, dass img ein Inline-Element ist. ;-)
Gruß,
-Efchen
sorry, vielleicht etwas zur Erläuterung:
img ist kein reines Inline-Element.
Genauer gesagt sind img's eine Mischung aus Inline,- und Block-Boxen und deswegen heißen sie Inline-Block-Boxen.
Im Fließtext blockiert die Grafik den nach oben benötigten Platz und schiebt die Zeilen darüber so weit weg wie nötig.
Normale Inline-Elemente tun so etwas nicht. Sie schieben nichts weg.
Das tun nur Blockelemente.
Aber die würden wiederum in einer eigenen Zeile stehen.
Inline-Block-Boxen verhalten sich gemischt:
- Sie fließen wie Inline-Boxen in einer Zeile mit
-Sie schieben aber wie Blockelelemente die Zeilen darüber und darunter so
weit auseinander, das sie selbst dazwischen passen.
Zur Gestaltung von Inline-Block-Boxen kann man bis auf zwei Ausnahmen das klassische Boxmodell benutzen:
- Ohne Angabe von width werden Inline-Block-Boxen nur so breit wie ihr
Inhalt und nicht so breit wie es geht
-Es gibt keine "collapsing Margins"
Die anderen Box-Modell-Eigenschaften height, padding und border funktionieren so wie bei Blockelementen.
(teilweise aus Peter Müllers "Little Boxes 2" zitiert, weil er so anschaulich erklären kann

koslowski
edit. sorry für meine Schulmeisterei, aber imho ist meine Erläuterung nicht ganz unwichtig um das img-Element im Zusammenhang mit dem Boxmodell zu verstehen.

Zuletzt bearbeitet: