Inline- und Block-Elemente
Code Sources Icon Code Sources Icon

HTML-Elemente die mitfliessen werden Inline-Elemente genannt (Links, Bilder, <span>-Klassen).  HTML-Elemente die eine neue Zeile bilden werden Block-Elemente genannt (Titel, Absätze, <div>-Rahmen). Mit CSS lassen sie die Standardwerte auswechseln.
Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.
HTML Elemente

Aufgabe 13> weiter

.Jedes HTMLElement ist sichtbar oder unsichtbar, es kann mit dem Inhalt mitfliessen (Link, Bild, Span) oder es kann eine eigene Zeile, eien eigenen Block bilden (h1, h2, p, div).

  • display:none; > nimmt ein Element aus dem HTML-Code
  • display: block; > zwingt das Element in eine neue Zeile/Block
  • display: inline-block; > lässt die Elemente nebeneinander fliessen, bleibt aber innerhalb ein Block
  • display: inline; > lässt die Elemente nebeinander fliessen

Mit "inline-block" kann eine Navigationsliste einfach von einer vertikalen zu einer horizontalen Liste umformatier werden.

  1. Untersuche die HTML-Elemnte und ihre Verschachtelung: <boby> <nav> <ul> <li> <a>
  2. Welches Element ist in dieser Liste vertikal angeordnet? Welches Element muss für eine horizontale Liste nebeneinander gestellt werden?
  3. Füge dem Listenelement die Eigenschaft zu nebeneinander zu fliessen. Beispiel:
            nav ul li {
                padding:0px;
                display:inline-block;
            }
  4. wefwfe
DB-Table: cssbasic13