Guten Morgen, eigentlich wollten wir nur die Größenangaben in CSS überarbeiten. Auf dem Stammtisch schauten wir uns dann den Artikel zum [**Boxmodell**](https://wiki.selfhtml.org/wiki/Boxmodell) an, der in den letzten Wochen aktualisiert wurde.[^1] [^1]: Gleich am Anfang wurden `margin` und `padding` erwähnt, aber nicht erklärt. Das ist nachgeholt. Über einen [Callout-Generator](https://wiki.selfhtml.org/wiki/Boxmodell#Kurzschreibweisen) kommt man dann zu den logischen Eigenschaften. Das war ursprünglich ein eigenes Kapitel, dessen Inhalte nun in die entsprechenden Artikel integriert wurden. Die Frage, was mit aufeinanderfolgenden Boxen passiert, führte uns zum display-Tutorial. Da gab es Abschnitte, in denen der Stand von 2012 beschrieben wurde, anderes wurde immer wieder ergänzt, sodass es zu Wiederholungen kam. Hier möchte ich eine Neukonzeption vorstellen und hoffe auf eure ***peer-review***: * [Benutzer:MScharwies/**Layout-Verhalten mit display**](https://wiki.selfhtml.org/wiki/Layout-Verhalten_mit_display) Kapitel 1 führt das „klassische“ Modell block vs. inline ein. Das ist mir erst während des Schreibens aufgefallen: `inline-block` ist weitgehend von `flex` ersetzt worden - eine Anwendung ist noch, einen span zu `inline-block` umzuwandeln um ihm ein vertikales padding zu geben und ihn transformieren zu können. [^2] [^2]: Dieser Use Case wurde interessanterweise bereits im Boxmodell-Artikel beschrieben - wieder ein Querverweis mehr, der Zusammenhänge aufdeckt! [Kapitel 2](https://wiki.selfhtml.org/wiki/Layout-Verhalten_mit_display#.C3.84u.C3.9Ferer_Display-Typ) führt die Doppel-Syntax ein. Eigentlich mag ich ja keine Beispiele mit nummerierten Boxen – hier wird aber hoffentlich klar, was `block flex` und `inline flex` unterscheidet. Im Kapitel zu [flow-root](https://wiki.selfhtml.org/wiki/Layout-Verhalten_mit_display#flow-root_.E2.80.93_ein_eigener_Block-Formatierungskontext) wird der Begriff Blockformatierungskontext erwähnt und verlinkt, aber nicht eigens erklärt. Passt das so?[^3] [^3]: Interessant: Damit kann man einen Clearfix, der früher mal so wichtig war, vermeiden. Das Tutorial [Textumfluss mit float und clear](https://wiki.selfhtml.org/wiki/Textumfluss_mit_float_und_clear#Clearfix) ist angepasst. Noch besser ist allerdings Flexbox oder Grid! Ein Tutorial soll ein Thema/Problem/Anwendungsfall vom einfachen zum schwierigen behandeln und möglichst anschaulich (vielleicht sogar mit Beispielen) erklären. Deshalb habe ich in [**Kapitel 3**](https://wiki.selfhtml.org/wiki/Layout-Verhalten_mit_display#Moderne_Layouts_mit_Flexbox_und_Grid) und auch in Kap. 4 nur kurze Erklärungen und Cards auf Folge-Tutorials verwendet. Auch vorher hatte ich überlegt, ob Werte wie `run-in` überhaupt erwähnt werden sollen. Imho ist dafür die Referenz da, in der es aufgeführt ist. Auch die vielen Werte zu `display:table-*` würden in einem Anfänger-Tutorial eher verwirren. Wer das sucht, findet ein Beispiel an gewohnter Stelle in einem Extra-Artikel: [CSS/Eigenschaften/display:_table](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/display:_table) ***Bitte lest euch das mal durch!*** BTW: Wer sich über den Namen **„Layout-Verhalten mit display“** wundert. Das Original hieß /display – ich möchte peu a peu „sprechende“ Seitennamen verwenden und anstelle von kryptischen Links eben Cards mit guten Linktexten anlegen. Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)

Guten Morgen, eigentlich wollten wir nur die Größenangaben in CSS überarbeiten. Auf dem Stammtisch schauten wir uns dann den Artikel zum [**Boxmodell**](https://wiki.selfhtml.org/wiki/Boxmodell) an, der in den letzten Wochen aktualisiert wurde.[^1] [^1]: Gleich am Anfang wurden `margin` und `padding` erwähnt, aber nicht erklärt. Das ist nachgeholt. Über einen [Callout-Generator](https://wiki.selfhtml.org/wiki/Boxmodell#Kurzschreibweisen) kommt man dann zu den logischen Eigenschaften. Das war ursprünglich ein eigenes Kapitel, dessen Inhalte nun in die entsprechenden Artikel integriert wurden. Die Frage, was mit aufeinanderfolgenden Boxen passiert, führte uns zum display-Tutorial. Da gabe es Abschnitte, in denen der Stand von 2012 beschreiben wurde, anderes wurde immer wieder ergänzt, sodass es zu Wiederholungen kam. Hier möchte ich eine Neukonzeption vorstellen und hoffe auf eure ***peer-review***: * [Benutzer:MScharwies/**Layout-Verhalten mit display**](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display) Kapitel 1 führt das „klassische“ Modell block vs. inline ein. Das ist mir erst während des Schreibens aufgefallen: `inline-block` ist weitgehend von `flex` ersetzt worden - eine Anwendung ist noch, einen span zu `inline-block` umzuwandeln um ihm ein vertikales padding zu geben und ihn transformieren zu können. [^2] [^2]: Dieser Use Case wurde interessanterweise bereits im Boxmodell-Artikel beschrieben - wieder ein Querverweis mehr, der Zusammenhänge aufdeckt! [Kapitel 2](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display#.C3.84u.C3.9Ferer_Display-Typ) führt die Doppel-Syntax ein. Eigentlich mag ich ja keine Beispiele mit nummerierten Boxen – hier wird aber hoffentlich klar, was `block flex` und `inline flex` unterscheidet. Im Kapitel zu [flow-root](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display#flow-root_.E2.80.93_ein_eigener_Block-Formatierungskontext) wird der Begriff Blockformatierungskontext erwähnt und verlinkt, aber nicht eigens erklärt. Passt das so?[^3] [^3]: Interessant: Damit kann man einen Clearfix, der früher mal so wichtig war, vermeiden. Das Tutorial [Textumfluss mit float und clear](https://wiki.selfhtml.org/wiki/Textumfluss_mit_float_und_clear#Clearfix) ist angepasst. Noch besser ist allerdings Flexbox oder Grid! Ein Tutorial soll ein Thema/Problem/Anwendungsfall vom einfachen zum schwierigen behandeln und möglichst anschaulich (vielleicht sogar mit Beispielen) erklären. Deshalb habe ich in [**Kapitel 3**](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display#Moderne_Layouts_mit_Flexbox_und_Grid) und auch in Kap. 4 nur kurze Erklärungen und Cards auf Folge-Tutorials verwendet. Auch vorher hatte ich überlegt, ob Werte wie `run-in` überhaupt erwähnt werden sollen. Imho ist dafür die Referenz da, in der es aufgeführt ist. Auch die vielen Werte zu `display:table-*` würden in einem Anfänger-Tutorial eher verwirren. Wer das sucht, findet ein Beispiel an gewohnter Stelle in einem Extra-Artikel: [CSS/Eigenschaften/display:_table](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/display:_table) ***Bitte lest euch das mal durch!*** BTW: Wer sich über den Namen **„Layout-Verhalten mit display“** wundert. Das Original hieß /display – ich möchte peu a peu „sprechende“ Seitennamen verwenden und anstelle von kryptischen Links eben Cards mit guten Linktexten anlegen. Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)

Guten Morgen, eigentlich wollten wir nur die Größenangaben in CSS überarbeiten. Auf dem Stammtisch schauten wir uns dann den Artikel zum [**Boxmodell**](https://wiki.selfhtml.org/wiki/Boxmodell) an, der in den letzten Wochen aktualisiert wurde.[^1] [^1]: Gleich am Anfang wurden `margin` und `padding` erwähnt, aber nicht erklärt. Das ist nachgeholt. Über einen [Callout-Generator](https://wiki.selfhtml.org/wiki/Boxmodell#Kurzschreibweisen) kommt man dann zu den logischen Eigenschaften. Das war ursprünglich ein eigenes Kapitel, dessen Inhalte nun in die entsprechenden Artikel integriert wurden. Die Frage, was mit aufeinanderfolgenden Boxen passiert, führte uns zum display-Tutorial. Hier möchte ich eine Neukonzeption vorstellen und hoffe auf eure ***peer-review***: * [Benutzer:MScharwies/**Layout-Verhalten mit display**](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display) Kapitel 1 führt das „klassische“ Modell block vs. inline ein. Das ist mir erst während des Schreibens aufgefallen: `inline-block` ist weitgehend von `flex` ersetzt worden - eine Anwendung ist noch, einen span zu `inline-block` umzuwandeln um ihm ein vertikales padding zu geben und ihn transformieren zu können. [^2] [^2]: Dieser Use Case wurde interessanterweise bereits im Boxmodell-Artikel beschrieben - wieder ein Querverweis mehr, der Zusammenhänge aufdeckt! [Kapitel 2](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display#.C3.84u.C3.9Ferer_Display-Typ) führt die Doppel-Syntax ein. Eigentlich mag ich ja keine Beispiele mit nummerierten Boxen – hier wird aber hoffentlich klar, was `block flex` und `inline flex` unterscheidet. Im Kapitel zu [flow-root](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display#flow-root_.E2.80.93_ein_eigener_Block-Formatierungskontext) wird der Begriff Blockformatierungskontext erwähnt und verlinkt, aber nicht eigens erklärt. Passt das so?[^3] [^3]: Interessant: Damit kann man einen Clearfix, der früher mal so wichtig war, vermeiden. Das Tutorial [Textumfluss mit float und clear](https://wiki.selfhtml.org/wiki/Textumfluss_mit_float_und_clear#Clearfix) ist angepasst. Noch besser ist allerdings Flexbox oder Grid! Ein Tutorial soll ein Thema/Problem/Anwendungsfall vom einfachen zum schwierigen behandeln und möglichst anschaulich (vielleicht sogar mit Beispielen) erklären. Deshalb habe ich in [**Kapitel 3**](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display#Moderne_Layouts_mit_Flexbox_und_Grid) und auch in Kap. 4 nur kurze Erklärungen und Cards auf Folge-Tutorials verwendet. Auch vorher hatte ich überlegt, ob Werte wie `run-in` überhaupt erwähnt werden sollen. Imho ist dafür die Referenz da, in der es aufgeführt ist. Auch die vielen Werte zu `display:table-*` würden in einem Anfänger-Tutorial eher verwirren. Wer das sucht, findet ein Beispiel an gewohnter Stelle in einem Extra-Artikel: [CSS/Eigenschaften/display:_table](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/display:_table) ***Bitte lest euch das mal durch!*** BTW: Wer sich über den Namen **„Layout-Verhalten mit display“** wundert. Das Original hieß /display – ich möchte peu a peu „sprechende“ Seitennamen verwenden und anstelle von kryptischen Links eben Cards mit guten Linktexten anlegen. Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)

Guten Morgen, eigentlich wollten wir nur die Größenangaben in CSS überarbeiten. Auf dem Stammtisch schauten wir uns dann den Artikel zum [**Boxmodell**](https://wiki.selfhtml.org/wiki/Boxmodell) an, der in den letzten Wochen aktualisiert wurde.[^1] [^1]: Gleich am Anfang wurden `margin` und `padding` erwähnt, aber nicht erklärt. Das ist nachgeholt. Über einen [Callout-Generator](https://wiki.selfhtml.org/wiki/Boxmodell#Kurzschreibweisen) kommt man dann zu den logischen Eigenschaften. Das war ursprünglich ein eigenes Kapitel, dessen Inhalte nun in die entsprechenden Artikel integriert wurden. Die Frage, was mit aufeinanderfolgenden Boxen passiert, führte uns zum display-Tutorial. Hier möchte ich eine Neukonzeption vorstellen und hoffe auf eure ***peer-review***: * [Benutzer:MScharwies/**Layout-Verhalten mit display**](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display) Kapitel 1 führt das „klassische“ Modell block vs. inline ein. Das ist mir erst während des Schreibens aufgefallen: `inline-block` ist weitgehend von `flex` ersetzt worden - eine Anwendung ist noch, einen span zu `inline-block` umzuwandeln um ihm ein vertikales padding zu geben und ihn transformieren zu können. [^2] [^2]: Dieser Use Case wurde interessanterweise bereits im Boxmodell-Artikel beschrieben - wieder ein Querverweis mehr, der Zusammenhänge aufdeckt! [Kapitel 2](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display#.C3.84u.C3.9Ferer_Display-Typ) führt die Doppel-Syntax ein. Eigentlich mag ich ja keine Beispiele mit nummerierten Boxen – hier wird aber hoffentlich klar, was `block flex` und `inline flex` unterscheidet. Im Kapitel zu [flow-root](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display#flow-root_.E2.80.93_ein_eigener_Block-Formatierungskontext) wird der Begriff Blockformatierungskontext erwähnt und velrinkt, aber nicht eigens erklärt. Passt das so?[^3] [^3]: Interessant: Damit kann man einen Clearfix, der früher mal so wichtig war, vermeiden. Das Tutorial [Textumfluss mit float und clear](https://wiki.selfhtml.org/wiki/Textumfluss_mit_float_und_clear#Clearfix) ist angepasst. Noch besser ist allerdings Flexbox oder Grid! Ein Tutorial soll ein Thema/Problem/Anwendungsfall vom einfachen zum schwierigen behandeln und möglichst anschaulich (vielleicht sogar mit Beispielen) erklären. Deshalb habe ich in [**Kapitel 3**](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display#Moderne_Layouts_mit_Flexbox_und_Grid) und auch in Kap. 4 nur kurze Erklärungen und Cards auf Folge-Tutorials verwendet. Auch vorher hatte ich überlegt, ob Werte wie `run-in` überhaupt erwähnt werden sollen. Imho ist dafür die Referenz da, in der es aufgeführt ist. Auch die vielen Werte zu `display:table-*` würden in einem Anfänger-Tutorial eher verwirren. Wer das sucht, findet ein Beispiel an gewohnter Stelle in einem Extra-Artikel: [CSS/Eigenschaften/display:_table](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/display:_table) ***Bitte lest euch das mal durch!*** BTW: Wer sich über den Namen **„Layout-Verhalten mit display“** wundert. Das Original hieß /display – ich möchte peu a peu „sprechende“ Seitennamen verwenden und anstelle von kryptischen Links eben Cards mit guten Linktexten anlegen. Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)

Guten Morgen, eigentlich wollten wir nur die Größenangaben in CSS überarbeiten. Auf dem Stammtisch schauten wir uns dann den Artikel zum [**Boxmodell**](https://wiki.selfhtml.org/wiki/Boxmodell) an, der in den letzten Wochen aktualisiert wurde.[^1] [^1]: Gleich am Anfang wurden `margin` und `padding` erwähnt, aber nicht erklärt. Das ist nachgeholt. Über einen [Callout-Generator](https://wiki.selfhtml.org/wiki/Boxmodell#Kurzschreibweisen) kommt man dann zu den logischen Eigenschaften. Das war ursprünglich ein eigenes Kapitel, dessen Inhalte nun in die entsprechenden Artikel integriert wurden. Die Frage, was mit aufeinanderfolgenden Boxen passiert, führte uns zum display-Tutorial. Hier möchte ich eine Neukonzeption vorstellen und hoffe auf eure ***peer-review***: * [Benutzer:MScharwies/**Layout-Verhalten mit display**](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display) Kapitel 1 führt das „klassische“ Modell block vs. inline ein. Das ist mir erst während des Schreibens aufgefallen: `inline-block` ist weitgehend von `flex` ersetzt worden - eine Anwendung ist noch, einen span zu `inline-block` umzuwandeln um ihm ein vertikales padding zu geben und ihn transformieren zu können. [^2] [^2]: Dieser Use Case wurde interessanterweise bereits im Boxmodell-Artikel beschrieben - wieder ein Querverweis mehr, der Zusammenhänge aufdeckt! [Kapitel 2](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display#.C3.84u.C3.9Ferer_Display-Typ) führt die Doppel-Syntax ein. Eigentlich mag ich ja keine Beispiele mit nummerierten Boxen – hier wird aber hoffentlich klar, was `block flex` und `inline flex` unterscheidet. Im Kapitel zu [flow-root](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display#flow-root_.E2.80.93_ein_eigener_Block-Formatierungskontext) wird der Begriff Blockformatierungskontext erwähnt und velrinkt, aber nicht eigens erklärt. Passt das so?[^3] [^3]: Interessant: Damit kann man einen Clearfix, der früher mal so wichtig war, vermeiden. Das Tutorial [Textumfluss mit float und clear](https://wiki.selfhtml.org/wiki/Textumfluss_mit_float_und_clear#Clearfix) ist angepasst. Noch besser ist allerdings Flexbox oder Grid! Ein Tutorial soll ein Thema/Problem/Anwendungsfall vom einfachen zum schwierigen behandeln und möglichst anschaulich (vielleicht sogar mit Beispielen) erklären. Deshalb habe ich in [**Kapitel 3**](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display#Moderne_Layouts_mit_Flexbox_und_Grid) und auch in Kap. 4 nur kruze Erklärungen und Cards auf Folge-Tutorial verwendet. ***Bitte lest euch das mal durch!*** BTW: Wer sich über den Namen **„Layout-Verhalten mit display“** wundert. Das Original hieß /display – ich möchte peu a peu „sprechende“ Seitennamen verwenden und anstelle von kryptischen Links eben Cards mit guten Linktexten anlegen. Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)