modul:m287:learningunits:lu03:grundlagen

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
modul:m287:learningunits:lu03:grundlagen [2025/03/14 07:28] kdemircimodul:m287:learningunits:lu03:grundlagen [2025/03/14 08:18] (aktuell) kdemirci
Zeile 1: Zeile 1:
-====== CSS-Box-Modell ======+====== LU03a - Box-Modell ======
 Als Grundlage für das Positionieren von Elementen und das Erstellen eines Layouts dient in CSS das Box-Model (oder auch Kastenmodell). In diesem Teil werden das //klassische// und das //neue, intuitivere// Box-Modell vorgestellt. Als Grundlage für das Positionieren von Elementen und das Erstellen eines Layouts dient in CSS das Box-Model (oder auch Kastenmodell). In diesem Teil werden das //klassische// und das //neue, intuitivere// Box-Modell vorgestellt.
  
Zeile 7: Zeile 7:
   * **Padding** (Innenabstand)   * **Padding** (Innenabstand)
   * **Border** (Rahmen)   * **Border** (Rahmen)
-  * **Margin** (Außenabstand)+  * **Margin** (Aussenabstand)
  
 {{:modul:m287:learningunits:lu03:box-modell_einfach.png?600|}} {{:modul:m287:learningunits:lu03:box-modell_einfach.png?600|}}
  
 Jede dieser Boxen kann in **top**, **right**, **bottom** und **left** unterteilt werden. Jede dieser Boxen kann in **top**, **right**, **bottom** und **left** unterteilt werden.
 +
 +{{:modul:m287:learningunits:lu03:box-modell_detailliert.gif?600|}}
  
 ===== Innenabstand angeben ===== ===== Innenabstand angeben =====
Zeile 33: Zeile 35:
 </code> </code>
  
-===== Den Außenabstand ===== +===== Den Aussenabstand ===== 
-Die CSS-Eigenschaft ''margin'' legt den Außenabstand zu anderen Elementen fest.+Die CSS-Eigenschaft ''margin'' legt den Aussenabstand zu anderen Elementen fest.
  
 **Beispiel:** **Beispiel:**
Zeile 43: Zeile 45:
 </code> </code>
  
-===== Zusammenfallende vertikale Außenabstände (Collapsing Margins) ===== +===== Zusammenfallende vertikale Aussenabstände (Collapsing Margins) ===== 
-Wenn sich zwei vertikale Margins treffen, verschmelzen sie zum größeren Wert.+Wenn sich zwei vertikale Margins treffen, verschmelzen sie zum grösseren Wert.
  
 {{:modul:m287:learningunits:lu03:box-modell_collapsing-margins.png?600|}} {{:modul:m287:learningunits:lu03:box-modell_collapsing-margins.png?600|}}
  • modul/m287/learningunits/lu03/grundlagen.1741933738.txt.gz
  • Zuletzt geändert: 2025/03/14 07:28
  • von kdemirci