Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m287:learningunits:lu04:loesungen:display [2026/03/25 09:23] – angelegt vdemir
+++ de:modul:m287:learningunits:lu04:loesungen:display [2026/03/25 09:35] (aktuell) – vdemir
@@ Zeile 13: / Zeile 13: @@
 <code HTML>
-  <div>Block-Element</div>
+<div>Block-Element</div>
 </code>
+**Inline-Elemente**
+  * Bleiben in der gleichen Zeile
+  * Nehmen nur so viel Platz ein wie ihr Inhalt
+  * Breite und Höhe lassen sich nicht sinnvoll setzen
+<code>
+<span>Inline-Element</span>
+</code>
+===== Teil 2 =====
+Die CSS-Eigenschaft //display// bestimmt, wie ein Element dargestellt wird.
+**Von block zu inline**
+<code>
+div {
+  display: inline;
+}
+</code>
+**Auswirkung:**
+  * Element steht nicht mehr in einer neuen Zeile
+  * Breite passt sich dem Inhalt an
+  * Layout wird „textähnlich“
+**Von inline zu block**
+<code>
+span {
+  display: block;
+}
+</code>
+**Auswirkung:**
+  * Element beginnt in neuer Zeile
+  * Nimmt volle Breite ein
+  * Kann Breite, Höhe, Abstände sauber nutzen
+===== Aha-Effekt =====
+  * **block:** strukturiert Layout (untereinander)
+  * **inline:** fliesst im Text (nebeneinander)
+  * **Effekt:**
+    * Block-Elemente bauen das Gerüst,
+    * Inline-Elemente füllen es
 ----
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir