Kapitel 10: Anzeigemodi (Display)

Jedes HTML-Element hat einen standardmäßigen Anzeigemodus (Display-Modus). Dieser bestimmt, wie sich das Element im Layout verhält. In diesem Kapitel lernen Sie die drei wichtigsten Anzeigemodi!

10.1 Drei Kern-Anzeigemodi

Es gibt drei Kern-Anzeigemodi, die Sie kennen müssen:

1. Block-Elemente (Block-Level Elements)

Verhalten: Nehmen die gesamte verfügbare Breite ein und beginnen in einer neuen Zeile.
Können Breite und Höhe festlegen: Ja (width und height funktionieren).
Abstand: Vertikaler Abstand durch margin und padding möglich.
Beispiele: <div>, <p>, <h1>-<h6>, <ul>, <li>, <section>, <article>

2. Inline-Elemente (Inline Elements)

Verhalten: Nehmen nur so viel Breite ein wie nötig und bleiben in derselben Zeile.
Können Breite und Höhe festlegen: Nein (width und height werden ignoriert!).
Abstand: Nur horizontaler Abstand durch margin-left und margin-right möglich. Vertikaler Abstand durch margin-top und margin-bottom wird ignoriert.
Beispiele: <span>, <a>, <strong>, <em>, <img> (eigentlich inline-block), <input> (eigentlich inline-block)

3. Inline-Block-Elemente (Inline-Block Elements)

Verhalten: Wie Inline-Elemente (bleiben in derselben Zeile), können aber wie Block-Elemente Breite und Höhe festlegen.
Können Breite und Höhe festlegen: Ja.
Abstand: Sowohl horizontaler als auch vertikaler Abstand möglich.
Beispiele: <img>, <input>, <button>, <select> (standardmäßig inline-block)

10.2 Anzeigemodus umschalten (display-Eigenschaft)

Mit der display-Eigenschaft können Sie den Anzeigemodus eines Elements ändern!

📝 Syntax

css

selektor {
    display: wert;
}

🔄 Mögliche Werte

Wert	Beschreibung
`block`	Macht das Element zu einem Block-Element
`inline`	Macht das Element zu einem Inline-Element
`inline-block`	Macht das Element zu einem Inline-Block-Element
`none`	Versteckt das Element (wird nicht angezeigt, nimmt keinen Platz ein)
`flex`	Aktiviert Flexbox-Layout (siehe Kapitel 13)
`grid`	Aktiviert Grid-Layout (siehe Kapitel 14)

🎯 Beispiele

css

/* Ein Inline-Element (span) zu einem Block-Element machen */
span {
    display: block;
    width: 200px;
    height: 100px;
    background-color: lightblue;
}

/* Ein Block-Element (div) zu einem Inline-Element machen */
div {
    display: inline;
    /* Achtung: width und height funktionieren jetzt nicht mehr! */
}

/* Ein Block-Element (div) zu einem Inline-Block-Element machen */
div {
    display: inline-block;
    width: 200px;
    height: 100px;
    background-color: lightgreen;
    margin: 10px;
}

/* Ein Element verstecken */
.hidden {
    display: none;
}

💡 Wichtige Tipps

display: none; vs. visibility: hidden;:
- display: none;: Element wird komplett entfernt (nimmt keinen Platz ein).
- visibility: hidden;: Element wird unsichtbar, nimmt aber weiterhin Platz ein.
display ändert das Verhalten, nicht das HTML-Tag!:
- Ein <span> mit display: block; verhält sich wie ein Block-Element, bleibt aber semantisch ein <span>.

10.3 Anfänger-Tipps: Leerzeichenproblem bei Inline-Elementen

Ein häufiges Problem bei Inline- und Inline-Block-Elementen: Zwischen ihnen erscheint ein Leerzeichen!

❌ Das Problem

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 0; /* Margin auf 0 setzen */
        }
    </style>
</head>
<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</body>
</html>

Erwartet: Die drei Boxen sollten direkt nebeneinander liegen (kein Abstand).

Tatsächlich: Zwischen den Boxen erscheint ein kleiner Leerraum (verursacht durch das Zeilenumbruch-Leerzeichen im HTML-Code).

✅ Lösungen

Lösung 1: HTML-Kommentare verwenden (Nicht empfohlen, unsauber)

html

<div class="box">Box 1</div><!--
--><div class="box">Box 2</div><!--
--><div class="box">Box 3</div>

Lösung 2: `font-size: 0;` auf dem Elternelement (Bedingt empfohlen)

css

.container {
    font-size: 0; /* Leerzeichen entfernen */
}

.box {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    font-size: 16px; /* Schriftgröße wiederherstellen */
}

Lösung 3: Flexbox verwenden (Am besten! - Siehe Kapitel 13)

css

.container {
    display: flex; /* Flexbox aktivieren */
    gap: 0; /* Kein Abstand zwischen den Elementen */
}

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

Lösung 4: Negative Margin verwenden (Nicht empfohlen, unschön)

css

.box {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin-right: -4px; /* Negativer Margin, um Leerzeichen auszugleichen (Wert variiert!) */
}

10.4 Praxis: Navigationsleiste und Formularelemente anordnen

Lassen Sie uns das Gelernte in einem praktischen Beispiel anwenden!

🎯 Beispiel 1: Navigationsleiste mit `inline-block`

HTML (index.html):

html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigationsleiste</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="main-nav">
        <ul>
            <li><a href="#">Startseite</a></li>
            <li><a href="#">Über uns</a></li>
            <li><a href="#">Dienstleistungen</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
</body>
</html>

CSS (style.css):

css

/* ===== Reset ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* ===== Navigationsleiste ===== */
.main-nav {
    background-color: #333333;
    padding: 10px 0;
}

.main-nav ul {
    list-style-type: none; /* Aufzählungszeichen entfernen */
    text-align: center; /* Links zentrieren */
}

.main-nav li {
    display: inline-block; /* Listenelemente nebeneinander anordnen */
    margin: 0 15px; /* Abstand zwischen den Elementen */
}

.main-nav a {
    display: block; /* Links zu Block-Elementen machen (ganze Fläche klickbar) */
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.main-nav a:hover {
    background-color: #555555;
}

🔍 Erklärung des Codes:

.main-nav li { display: inline-block; }: Macht die Listenelemente (<li>) zu Inline-Block-Elementen, sodass sie nebeneinander liegen, aber dennoch padding und margin akzeptieren.
.main-nav a { display: block; }: Macht die Links (<a>) zu Block-Elementen, sodass die gesamte Fläche des <li>-Elements klickbar ist.
list-style-type: none;: Entfernt die Aufzählungszeichen der Liste.

🎯 Beispiel 2: Formularelemente mit `inline-block`

HTML (index.html):

html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formularelemente</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form class="my-form">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Ihr Name">
        
        <label for="email">E-Mail:</label>
        <input type="email" id="email" name="email" placeholder="Ihre E-Mail">
        
        <button type="submit">Absenden</button>
    </form>
</body>
</html>

CSS (style.css):

css

/* ===== Reset ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding: 40px 20px;
}

/* ===== Formular ===== */
.my-form {
    max-width: 400px;
    margin: 0 auto;
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.my-form label {
    display: block; /* Labels in separate Zeilen setzen */
    margin-bottom: 5px;
    font-weight: bold;
    color: #333333;
}

.my-form input[type="text"],
.my-form input[type="email"] {
    display: block; /* Eingabefelder in separate Zeilen setzen */
    width: 100%; /* Volle Breite */
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    font-size: 16px;
}

.my-form button {
    display: block; /* Button in separate Zeile setzen */
    width: 100%; /* Volle Breite */
    padding: 12px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.my-form button:hover {
    background-color: #45a049;
}

🔍 Erklärung des Codes:

.my-form label { display: block; }: Macht die Labels (<label>) zu Block-Elementen, sodass sie übereinander angeordnet werden.
.my-form input[type="text"], .my-form input[type="email"] { display: block; }: Macht die Eingabefelder (<input>) zu Block-Elementen, sodass sie übereinander angeordnet werden und die volle Breite einnehmen.
.my-form button { display: block; }: Macht den Button (<button>) zu einem Block-Element, sodass er die volle Breite einnimmt.

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ Die drei Kern-Anzeigemodi (block, inline, inline-block)
✅ Wie man den Anzeigemodus mit display ändert
✅ Das Leerzeichenproblem bei Inline-Elementen und dessen Lösungen
✅ Wie man eine Navigationsleiste und Formularelemente anordnet

🎯 Nächste Schritte

Im nächsten Kapitel werden wir:

** Float-Layout** erlernen (traditionelles Layout)
Float-Eigenschaft anwenden
Praktische Projekte zur Elementanordnung erstellen

Bereit für mehr? Los geht's! 🎨

Kapitel 10: Anzeigemodi (Display) ​

10.1 Drei Kern-Anzeigemodi ​

1. Block-Elemente (Block-Level Elements) ​

2. Inline-Elemente (Inline Elements) ​

3. Inline-Block-Elemente (Inline-Block Elements) ​

10.2 Anzeigemodus umschalten (display-Eigenschaft) ​

📝 Syntax ​

🔄 Mögliche Werte ​

🎯 Beispiele ​

💡 Wichtige Tipps ​

10.3 Anfänger-Tipps: Leerzeichenproblem bei Inline-Elementen ​

❌ Das Problem ​

✅ Lösungen ​

Lösung 1: HTML-Kommentare verwenden (Nicht empfohlen, unsauber) ​

Lösung 2: font-size: 0; auf dem Elternelement (Bedingt empfohlen) ​

Lösung 3: Flexbox verwenden (Am besten! - Siehe Kapitel 13) ​

Lösung 4: Negative Margin verwenden (Nicht empfohlen, unschön) ​

10.4 Praxis: Navigationsleiste und Formularelemente anordnen ​

🎯 Beispiel 1: Navigationsleiste mit inline-block ​

🎯 Beispiel 2: Formularelemente mit inline-block ​

📝 Zusammenfassung ​

🎯 Nächste Schritte ​

Kapitel 10: Anzeigemodi (Display)

10.1 Drei Kern-Anzeigemodi

1. Block-Elemente (Block-Level Elements)

2. Inline-Elemente (Inline Elements)

3. Inline-Block-Elemente (Inline-Block Elements)

10.2 Anzeigemodus umschalten (display-Eigenschaft)

📝 Syntax

🔄 Mögliche Werte

🎯 Beispiele

💡 Wichtige Tipps

10.3 Anfänger-Tipps: Leerzeichenproblem bei Inline-Elementen

❌ Das Problem

✅ Lösungen

Lösung 1: HTML-Kommentare verwenden (Nicht empfohlen, unsauber)

Lösung 2: `font-size: 0;` auf dem Elternelement (Bedingt empfohlen)

Lösung 3: Flexbox verwenden (Am besten! - Siehe Kapitel 13)

Lösung 4: Negative Margin verwenden (Nicht empfohlen, unschön)

10.4 Praxis: Navigationsleiste und Formularelemente anordnen

🎯 Beispiel 1: Navigationsleiste mit `inline-block`

🎯 Beispiel 2: Formularelemente mit `inline-block`

📝 Zusammenfassung

🎯 Nächste Schritte