nicht angemeldet
inline-, inline-block-element
Hallo,
Ich habe eine, zwei Fragen zum Thema inline-block und inline-block-box.
im Bsp inline-block: Aussen Inline-Box, innen Block-Box" im selfhtml-wiki verstehe ich Bsp nicht, woher die id="inline" kommt. Diese ist im style-Bereich nicht einzeln aufgeführt, jedoch als #inline-block...
Ist jedes Element automatisch ein inline-Element?
Eine Frage mit ähnlichem Hintergrung zum Element <code> des ersten Beispiels desselben obig genannten Abschnitts: ist das Element code nur dazu gebraucht, um dem darauffolgenden Text eine vordefinierte Formatierung zu geben, nämlich so wie im html-code? Könnte man anstatt code auch ein anderes Element der Textauszeichnung wählen?
Und woher weiss man, dass dort etwas display: inline; ist, wie im Titel geschrieben steht, da im style-Bereich diese Formatierung nicht auftaucht.
Vielen Dank,
bari.
-
Hallo,
im Bsp inline-block: Aussen Inline-Box, innen Block-Box" im selfhtml-wiki verstehe ich Bsp nicht, woher die id="inline" kommt. Diese ist im style-Bereich nicht einzeln aufgeführt, jedoch als #inline-block...
#inline könnte auch #holla-waldfee heißen. Das Beispiel ist auch ohne diese ID funktionsfähig. Das span-Element im ersten Beispiel ist immer ein inline-Element.
#inline-block könnte auch #guglhupf heißen, die ID wird nur dazu verwendet, dem darinliegenden span-Element die Eigenschaft display: inline-block; zuzuweisen.
Wie sich inline- und inline-block-Elemente voneinander Unterscheiden siehst du dann im Live-Beispiel.
Ist jedes Element automatisch ein inline-Element?
Jain. display: inline; ist die Standardeinstellung, d.h. alle Elemente, für die nichts abweichendes festgelegt wurde, sind inline-Elemente (das umfasst z.B. unbekannt Elemente aber nicht Elemente wie p oder h1, für die im Browser display: block; hinterlegt ist).
Eine Frage mit ähnlichem Hintergrung zum Element <code> des ersten Beispiels desselben obig genannten Abschnitts: ist das Element code nur dazu gebraucht, um dem darauffolgenden Text eine vordefinierte Formatierung zu geben, nämlich so wie im html-code? Könnte man anstatt code auch ein anderes Element der Textauszeichnung wählen?
Nein, das code-Element sagt dem Browser, dass der Text darin Code (also Anweisungen einer formalen Sprache sind). Ein Browser der das stärker berücksichtigt als handesübliche Browser kann anhand dessen z.B. versuchen Syntaxhighlighting durchzuführen.
Dass die Darstellung in einer nicht-proportionalen Schrift erfolgt ist sinnvoll, hat aber grundsätzlich nichts mit dem code-Element zu tun. Andere Elemente eigenen sich hier nicht.
Und woher weiss man, dass dort etwas display: inline; ist, wie im Titel geschrieben steht, da im style-Bereich diese Formatierung nicht auftaucht.
Was genau meinst du?
Das span-Element ist in HTML als Inline-Element definiert, daher wird es in CSS-fähigen Browsern mit Hilfe von display: inline; dargestellt.In CSS hat display den Standardwert inline, d.h. wie schon gesagt, das alle Elemente, für die kein anderer display-Wert festgelegt wurde, automatisch display: inline;-Elemente sind.
Ist die Sache jetzt etwas klarer?
-
inline-block: Aussen Inline-Box, innen Block-Box" im selfhtml-wiki...woher die id="inline" kommt.
#inline könnte auch #holla-waldfee heißen. Das Beispiel ist auch ohne diese ID funktionsfähig. Das span-Element im ersten Beispiel ist immer ein inline-Element.
#inline-block könnte auch #guglhupf heißen, die ID wird nur dazu verwendet, dem darinliegenden span-Element die Eigenschaft display: inline-block; zuzuweisen.
Wie sich inline- und inline-block-Elemente voneinander Unterscheiden siehst du dann im Live-Beispiel.
das habe ich eben gelesen, beim ersten wird beim Zeilenumbruch (durch Rand eines Elements z.b.) der Text einfach auf die nächste Zeile geschrieben währenddem beim inline-block der Umbruch zwar auch stattfindet, aber der Text in einer eigenen Box erhalten bleibt.
Ist jedes Element automatisch ein inline-Element?
Jain. display: inline; ist die Standardeinstellung, d.h. alle Elemente, für die nichts abweichendes festgelegt wurde, sind inline-Elemente (das umfasst z.B. unbekannt Elemente aber nicht Elemente wie p oder h1, für die im Browser display: block; hinterlegt ist).
Eine Frage mit ähnlichem Hintergrung zum Element <code> des ersten Beispiels desselben obig genannten Abschnitts: ist das Element code nur dazu gebraucht, um dem darauffolgenden Text eine vordefinierte Formatierung zu geben, nämlich so wie im html-code? Könnte man anstatt code auch ein anderes Element der Textauszeichnung wählen?
Nein, das code-Element sagt dem Browser, dass der Text darin Code (also Anweisungen einer formalen Sprache sind). Ein Browser der das stärker berücksichtigt als handesübliche Browser kann anhand dessen z.B. versuchen Syntaxhighlighting durchzuführen.
d.h. die farblichen Unterscheidungen im Quelltext ? (gibt es Composer, die schon beim Schreiben eines html-dokuments farbliche Unterschiede anzeigen?)
Dass die Darstellung in einer nicht-proportionalen Schrift erfolgt ist sinnvoll, hat aber grundsätzlich nichts mit dem code-Element zu tun. Andere Elemente eigenen sich hier nicht.
Und woher weiss man, dass dort etwas display: inline; ist, wie im Titel geschrieben steht, da im style-Bereich diese Formatierung nicht auftaucht.
Was genau meinst du?
Das span-Element ist in HTML als Inline-Element definiert, daher wird es in CSS-fähigen Browsern mit Hilfe von display: inline; dargestellt.da ich nicht wusste (aber langsam ahnte), dass display: inline; standard, aber trotzdem wie eine css-formatierung in geschwungenen Klammern geschrieben ist, suchte ich die bestimmte Formatierung dafür.
Könnte man analog sagen, dass im Prinzip jeder normal geschriebener Text im Viewport (als Box betrachtet) inline ist, der an den Rändern auf die nächste Zeile gebrochen wird?In CSS hat display den Standardwert inline, d.h. wie schon gesagt, das alle Elemente, für die kein anderer display-Wert festgelegt wurde, automatisch display: inline;-Elemente sind.
Ist die Sache jetzt etwas klarer?ja, das hilft mir sehr viel zum Verständnis der Elemente und ihrer Funktionen. Da es bei mir in diesem Zus.-hang um die horizontale Darstellung von zwei Tabellen geht, ist auch dieser Hinweis zu Gunnar's float-Erläuterungen hilfreich https://forum.selfhtml.org/?t=210841&m=1438205, obwohl ich das wohl z.Z. nicht brauche.
Vielen Dank,
bari.-
das habe ich eben gelesen, beim ersten wird beim Zeilenumbruch (durch Rand eines Elements z.b.) der Text einfach auf die nächste Zeile geschrieben währenddem beim inline-block der Umbruch zwar auch stattfindet, aber der Text in einer eigenen Box erhalten bleibt.
Du musst dir das so vorstellen: Die Box, die von einem Inline-Element erzeugt wird, kann aufgeteilt werden; die Box, die von einem inline-block-Element erzeugt wird dagegen nicht (die Inhalt des Elements aber wohl).
Das hat folgenden Grund: inline-block ist von außen betrachtet ein inline-Element: Es verläuft auf einer Zeile und kann entsprechend wie Text angeordnet werden; Sein Inhalt aber kann (im Gegensatz zu inline-Elementen) auch ein Block-Element sein. Und Blockelemente können nicht aufgteilt werden.
Deswegen steht in der Einleitung des Artikels, das ein Element null oder mehre Boxen erzeugen kann. Element und Box sind zwei unterschiedliche Dinge, die aber eng miteinander verbunden sind.
d.h. die farblichen Unterscheidungen im Quelltext ? (gibt es Composer, die schon beim Schreiben eines html-dokuments farbliche Unterschiede anzeigen?)
Richtig. Solche Programme gibt es unzählbar viele. Praktisch jedes Programm, dass sich auf das Schreiben von Quelltext spezialisiert hat, bietet diese Funktion auch für HTML und CSS.
da ich nicht wusste (aber langsam ahnte), dass display: inline; standard, aber trotzdem wie eine css-formatierung in geschwungenen Klammern geschrieben ist, suchte ich die bestimmte Formatierung dafür.
Jedes Element besitzt jede CSS-Eigenschaft. Sofern die Eigenschaft nicht vom Browser oder Benutzer oder vom Autor festgelegt wurde, wird der Standardwert verwendet (oder die vererbte Eigenschaft). Nicht alle Eigenschaften sind bei allen Elementen gültig, dennoch besitzen diese Elemente auch diese Eigenschaften, sie haben nur keinen Effekt.
Könnte man analog sagen, dass im Prinzip jeder normal geschriebener Text im Viewport (als Box betrachtet) inline ist, der an den Rändern auf die nächste Zeile gebrochen wird?
Ja, für Text, der sich innerhalb von Blockelementen befindet, aber nicht innerhalb von inline-Elementen wird automatisch eine anonyme Box erzeugt, die die Eigenschaften einer inline-Box besitzt.
ja, das hilft mir sehr viel zum Verständnis der Elemente und ihrer Funktionen. Da es bei mir in diesem Zus.-hang um die horizontale Darstellung von zwei Tabellen geht, ist auch dieser Hinweis zu Gunnar's float-Erläuterungen hilfreich https://forum.selfhtml.org/?t=210841&m=1438205, obwohl ich das wohl z.Z. nicht brauche.
Wenn du zwei Tabellen horizontal anordnen willst, eignet sich für die Tabelle der display-Wert inline-table (bei IE7 und älter reicht display: inline, da diese IEs die table-Werte noch nicht verarbeiten können).
Hier gitl ähnlich wie für inline-block: Von außen betrachtet hast du ein inline-Element, dass auf einer Zeile verläuft. Der Inhalt dieser Box dürfen aber nur Tabellenbestandteile sein (Tabellenüberschriften, -Zeilen, -Zellen etc.).
Ich glaube die table*-Werte sind im Wiki noch nicht enthalten.
Gruß
-
Hallo,
Deswegen steht in der Einleitung des Artikels, das ein Element null oder mehre Boxen erzeugen kann.
Hier gitl ähnlich wie für inline-block: Von außen betrachtet hast du ein inline-Element, dass auf einer Zeile verläuft.
Darf ich dich auf das(s) hier hinweisen?
Gruß
Kalk
-
-
-