LU04.L01 - Display

1. Beschreiben Sie den Unterschied zwischen Block- und Inline-Elementen in HTML und geben Sie jeweils ein Beispiel für ein Block-Element und ein Inline-Element an.
2. Ändern Sie das Anzeigeverhalten eines Elements mit der CSS-Eigenschaft „display“ von „block“ auf „inline“ und umgekehrt. Erläutern Sie, wie sich das Layout des Elements ändert.

Block-Elemente

• Beginnen immer in einer neuen Zeile
• Nehmen standardmässig die gesamte verfügbare Breite ein
• Können Breite, Höhe, Margin, Padding vollständig nutzen

<div>Block-Element</div>

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

<span>Inline-Element</span>

Die CSS-Eigenschaft display bestimmt, wie ein Element dargestellt wird.

Von block zu inline

div {
  display: inline;
}

Auswirkung:

• Element steht nicht mehr in einer neuen Zeile
• Breite passt sich dem Inhalt an
• Layout wird „textähnlich“

Von inline zu block

span {
  display: block;
}

Auswirkung:

• Element beginnt in neuer Zeile
• Nimmt volle Breite ein
• Kann Breite, Höhe, Abstände sauber nutzen

• block: strukturiert Layout (untereinander)
• inline: fliesst im Text (nebeneinander)
• Effekt:
  • Block-Elemente bauen das Gerüst,
  • Inline-Elemente füllen es

Volkan Demir