vertikales padding in Inlineelementen

[netinja]

Hallo,

Es heisst doch, dass Inlineelemente keine vertikalen Abstände haben.
Das stimmt aber nur zur Hälfte.

<div style="border: solid 1px">
   <a href="#" style="padding: 30px; background-color: #ff0000">link</a>
</div>

Der äussere Container schliesst oben und unten mit seinem Rand direkt am Linktext ab, d.h. das vertikale padding des Link dehnt den container NICHT aus.
Auf der anderen Seite wird aber der Link MIT einem Ringsum-padding dargestellt, wie man anhand des roten Hintergrunds sehen kann.

Das verstehe ich jetzt nicht.
Wie kommt denn das?
Ist die Darstellung im Firefox überhaupt richtig?

LG
netinja

[Cheatah]

Hi,

Es heisst doch, dass Inlineelemente keine vertikalen Abstände haben.

nein, es heißt, dass Inline-Elemente keine vertikalen _Außen_abstände haben. Also margin-top und margin-bottom. Innenabstände haben sie sehr wohl.

Cheatah

[netinja]

nein, es heißt, dass Inline-Elemente keine vertikalen _Außen_abstände haben. Also margin-top und margin-bottom. Innenabstände haben sie sehr wohl.

Hi Cheatah,

Aber wenn du dir meinen Code im Browser anguckst, siehst du, dass das vertikale padding des Link von anderen Elementen gar nicht beachtet wird, sonst müsste doch das padding das Aussendiv ausdehnen.

LG
netinja

[Gunnar Bittersmann]

Hello out there!

Aber wenn du dir meinen Code im Browser anguckst, siehst du, dass das vertikale padding des Link von anderen Elementen gar nicht beachtet wird, sonst müsste doch das padding das Aussendiv ausdehnen.

Nö. It works as disigned:

„Ist 'height' gleich 'auto', ist die Höhe davon abhängig, ob das Element untergeordnete Elemente auf Blockebene hat. Wenn es nur untergeordnete inzeilige Elemente hat, reicht die Höhe von der obersten Kante der obersten Zeilen-Box bis zur untersten Kante der untersten Zeilen-Box.“ [CSS2 §10.6.3]

Das Padding gehört wohl nicht zur Zeilen-Box.

See ya up the road,
Gunnar

[netinja]

„Ist 'height' gleich 'auto', ist die Höhe davon abhängig, ob das Element untergeordnete Elemente auf Blockebene hat. Wenn es nur untergeordnete inzeilige Elemente hat, reicht die Höhe von der obersten Kante der obersten Zeilen-Box bis zur untersten Kante der untersten Zeilen-Box.“

Hallo,

Danke euch beiden für eure Antwort.

Die Spezifikation ist leider schwer zu verstehen und nicht sehr anfängerfreundlich geschrieben.
Wißt ihr zufällig, wo mal alle ersetzten und nicht ersetzten Inlieelemente aufgelistet werden. Ohne Beispiele, die ich nachvollziehen kann, habe ich da echte Schwierigkeiten. :-(

LG
netinja

[Cheatah]

Hi,

Die Spezifikation ist leider schwer zu verstehen und nicht sehr anfängerfreundlich geschrieben.

richtig.

Wißt ihr zufällig, wo mal alle ersetzten und nicht ersetzten Inlieelemente aufgelistet werden. Ohne Beispiele, die ich nachvollziehen kann, habe ich da echte Schwierigkeiten. :-(

Welche Elemente replaced sind, wirst Du hoffentlich leicht merken. Inline sind mindestens alle Elemente, deren display-Eigenschaft den Wert "inline" besitzt. Da es unendlich viele verschiedene Elemente gibt - CSS beschränkt sich schließlich nicht auf HTML - würde eine vollständige Liste die Kapazität des Internets sprengen.

Cheatah

[netinja]

Welche Elemente replaced sind, wirst Du hoffentlich leicht merken.

Nein, leider nicht, denn ich habe die "Erklärung" in der Spezifikation nicht verstanden.

Inline sind mindestens alle Elemente, deren display-Eigenschaft den Wert "inline" besitzt.

Da erklärst du jetzt aber einen Begriff mit sich selbst. :-D
Ich habe mich bisher immer daran orientiert, ob die Elemente einen Zeilenumbruch haben, und ob man ihnen Breite und Höhe geben kann.

Eine Liste aller Inline-Eleente habe ich ja bereits gefunden.
http://de.selfhtml.org/html/referenz/elemente.htm#block_elemente
Welche von denen sind aber jetzt "ersetzt" oder "nicht ersetzt"?

Da es unendlich viele verschiedene Elemente gibt - CSS beschränkt sich schließlich nicht auf HTML - würde eine vollständige Liste die Kapazität des Internets sprengen.

Och, das Internet ist doch groß. *g*
Ausserdem würden mir die HTML-Elemente vollkommen als Beispiel genügen. :-D

CSS-Spezifikation.
http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap10.html#heading-10.3.1�

Kapitel 10.3.1  und  10.3.2:

Auch nach dem 5. mal Lesen verstehe ich leider  a b s o l u t  nicht, was das bedeuten soll.
Könnte mir das bitte mal jemand in verständlichere Worte packen, oder mir anhand eines Beispiels erklären.
Das wäre wirklich riesig von euch. :-D

LG
netinja

[Gunnar Bittersmann]

Hello out there!

Och, das Internet ist doch groß. *g*

Aber nicht unendlich groß.

Kapitel 10.3.1  und  10.3.2:
Auch nach dem 5. mal Lesen verstehe ich leider  a b s o l u t  nicht, was das bedeuten soll.

„10.3.1  Inline, nicht-ersetzte Elemente
Die 'width'-Eigenschaft wird nicht angewendet.“

Das sollte verständlich sein.

„Wird für 'left', 'right', 'margin-left' oder 'margin-right' der Wert 'auto' angegeben, wird daraus ein berechneter Wert von '0'.

Beispiel: Die Angabe span {margin-left: auto} bewirkt dasselbe wie span {margin-left: 0}

„10.3.2  Inline, ersetzte Elemente
Wird für 'left', 'right', 'margin-left' oder 'margin-right' der Wert 'auto' angegeben, wird daraus der berechnete Wert '0'.“

Siehe oben.

„Wird für 'width' der Wert 'auto' angegeben, wird die eigene Breite des Elements als berechneter Wert angenommen.“

Beipiel: img {width: auto} (Default im Browserstylesheet) bewirkt, dass das 'img'-Element so breit dargestellt wird wie eben das Bild ist, das anstelle des (hier leeren) Inhalts angezeigt wird.

Könnte mir das bitte mal jemand in verständlichere Worte packen, oder mir anhand eines Beispiels erklären.

Ist es mir gelungen?

See ya up the road,
Gunnar

[netinja]

„10.3.2  Inline, nicht ersetzte Elemente
„Wird für 'left', 'right', 'margin-left' oder 'margin-right' der Wert 'auto' angegeben, wird daraus ein berechneter Wert von '0'.

Ich habe gestern noch wild herumprobiert, und dann festgestellt, dass das auch auf Blockelemente zutrifft. Da wundert es mich ein bischen, dass das nun in der Spezifikation als besonderes Merkmal für Inlineelemente angegeben wird.

Beispiel: Die Angabe span {margin-left: auto} bewirkt dasselbe wie span {margin-left: 0}

Also das Gleiche, wie wenn man überhaupt kein margin angeben würde?

„10.3.2  Inline, ersetzte Elemente
„Wird für 'width' der Wert 'auto' angegeben, wird die eigene Breite des Elements als berechneter Wert angenommen.“

Beipiel: img {width: auto} (Default im Browserstylesheet) bewirkt, dass das 'img'-Element so breit dargestellt wird wie eben das Bild ist, das anstelle des (hier leeren) Inhalts angezeigt wird.

Also sind die Attribute width und height der <b>Inhalt</b> des Bildes?
Das alt-Attribut auch?
Oder, anders ausgedrückt, wäre der Inhalt vom img nur dann leer, wenn keines der 3 Attribute angegeben wäre?

Könnte mir das bitte mal jemand in verständlichere Worte packen, oder mir anhand eines Beispiels erklären.

Ist es mir gelungen?

Ja, herzlichen Dank :-D

Aber es ist schrecklich: Je mehr ich darüber lese, desto mehr <b>neue</b> Fragen tun sich auf. :-D

LG
netinja

[Gunnar Bittersmann]

Hello out there!

„10.3.2  Inline, nicht ersetzte Elemente
„Wird für 'left', 'right', 'margin-left' oder 'margin-right' der Wert 'auto' angegeben, wird daraus ein berechneter Wert von '0'.

Ich habe gestern noch wild herumprobiert, und dann festgestellt, dass das auch auf Blockelemente zutrifft.

Nein, tut es nicht. Das sieht nur so aus, wenn das Blockelement eine Breite von 100% hat. Gib ihm eine kleinere und du siehst, was 'margin: auto' bewirkt.

Beispiel: Die Angabe span {margin-left: auto} bewirkt dasselbe wie span {margin-left: 0}

Also das Gleiche, wie wenn man überhaupt kein margin angeben würde?

Wenn 'margin-left: auto' oder 'margin-left: 0' als Default im Browserstylesheet für diesen Elementtypen gesetzt ist, ja.

Für 'li' bspw. ist das evtl. nicht der Fall; aber wir sprachen ja hier von Inline-Elementen.

Beipiel: img {width: auto} (Default im Browserstylesheet) bewirkt, dass das 'img'-Element so breit dargestellt wird wie eben das Bild ist, das anstelle des (hier leeren) Inhalts angezeigt wird.

Also sind die Attribute width und height der <b>Inhalt</b> des Bildes?

Nein, das sind Attribute des 'img'-Elements. Der Inhalt des Bildes ist das, was da halt zu sehen ist; das hat mit HTML rein gar nichts zu tun. Demgegenüber ist der Inhalt des 'img'-Elements was? Gar nichts! 'img' ist ein leeres Element. Der leere Inhalt kann bei der Anzeige ersetzt werden durch das Bild, das sich hinter der im 'src'-Attribut angegebenen Ressource verbirgt; deshalb „ersetztes Element“. Der leere Inhalt kann aber alternativ auch ersetzt werden durch den Text im Wert des 'alt'-Attributs.

Oder, anders ausgedrückt, wäre der Inhalt vom img nur dann leer, wenn keines der 3 Attribute angegeben wäre?

Nein. Jetzt sollte klar sein, dass der Inhalt von 'img' immer leer ist.

See ya up the road,
Gunnar

[netinja]

Hallo Gunnar,

Vielen Dank für die Mühe, die du dir machst. :-D

Also sind die Attribute width und height der <b>Inhalt</b> des Bildes?

Nein, das sind Attribute des 'img'-Elements. Der Inhalt des Bildes ist das, was da halt zu sehen ist; das hat mit HTML rein gar nichts zu tun.

Gut, das habe ich jetzt verstanden.

Demgegenüber ist der Inhalt des 'img'-Elements was? Gar nichts! 'img' ist ein leeres Element. Der leere Inhalt kann bei der Anzeige ersetzt werden durch das Bild, das sich hinter der im 'src'-Attribut angegebenen Ressource verbirgt; deshalb „ersetztes Element“.

Und in diesem Fall ist das img-Element dann nicht mehr leer?

Der leere Inhalt kann aber alternativ auch ersetzt werden durch den Text im Wert des 'alt'-Attributs.

Ich habe mal ein paar Beispiele angefertigt und versuche, deine Erklärung  umzusetzen.

1. <img src="http://www.google.de/intl/de_de/images/logo.gif" alt="logo"  border="2">

2. <img src="gibts-nicht.gif" alt="logo"  border="2">

3. <img src="gibts-nicht.gif" alt="&nbsp;"  border="2">

4. <img src="gibts-nicht.gif" alt=""  border="2">

5. <img src="gibts-nicht.gif"   border="2">

Hoffentlich gebe ich das jetzt richtig wieder, sonst wirds peinlich. *g*

zu 1.
der normalerweise leere Inhalt des img-Element wird durch das google-Bild ersetzt, also ist der Inhalt nun das Google-Bild.

zu 2.
ein Bild gibt es nicht, aber der leere Inhalt wird alternativ  ersetzt durch den Text im Wert des 'alt'-Attributs, also ist der Inhalt des img-Elements das Wort "logo".

zu 3.
der Inhalt ist ein blank

zu 4. und 5.
der Inhalt ist ganz leer.

Habe ich das nun richtig wiedergegeben?
*hoff*

LG
netinja

[Gunnar Bittersmann]

Hello out there!

Demgegenüber ist der Inhalt des 'img'-Elements was? Gar nichts! 'img' ist ein leeres Element. Der leere Inhalt kann bei der Anzeige ersetzt werden durch das Bild, das sich hinter der im 'src'-Attribut angegebenen Ressource verbirgt; deshalb „ersetztes Element“.

Und in diesem Fall ist das img-Element dann nicht mehr leer?

Doch, ist es. IMMER (in HTML und XHTML 1.x).

Bei ersetzten Elementen kann aber anstelle des (bei 'img' leeren) Inhalts etwas anderes angezeigt werden (das Bild bspw. oder der Alternativtext – das ist dann aber nicht der Inhalt des 'img'-Elements).

Hoffentlich gebe ich das jetzt richtig wieder, sonst wirds peinlich. *g*

*schweig* ;-)

zu 4. und 5.
der Inhalt ist ganz leer.

Habe ich das nun richtig wiedergegeben?

Hättest du, wenn du geschrieben hättest „zu 1. bis 5.“

See ya up the road,
Gunnar

[netinja]

Hoffentlich gebe ich das jetzt richtig wieder, sonst wirds peinlich. *g*

*schweig* ;-)

Oh, Oh, Oh, ich glaube, ich verkrieche mich jetzt lieber erstmal. :-D

Auf jeden Fall aber vielen, vielen Dank für den Nachhilfeunterricht.
Ich werde mir deine Worte hinter die Ohren schreiben.  :-)

LG
netinja

[Gunnar Bittersmann]

Hello out there!

Die Spezifikation ist leider schwer zu verstehen und nicht sehr anfängerfreundlich geschrieben.

Ich find die HTML- und die CSS-Specs noch ganz verständlich geschrieben.
Da gibt’s ganz andere ...

Aber es sind halt Specs, keine Tutorials wie SELFHTML.

Wißt ihr zufällig, wo mal alle ersetzten und nicht ersetzten Inlieelemente aufgelistet werden.

Erklärt wird „ersetztes Element“ auch in der Spec [CSS2] im Abschnitt 3.1 Definitionen, sogar mit Beispielen.

Block- und Inline-Elemente werden erklärt im jeweils ersten Satz der Kapitel 9.2.1 bzw. 9.2.2.

See ya up the road,
Gunnar