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: