Boxmodell und Abstände

Diese Lektion behandelt das CSS-Boxmodell, Margin, Padding, Border und deren Auswirkungen auf Layout und Design.

1. Das CSS-Boxmodell

• Content: Der eigentliche Inhalt (Text, Bild, etc.)
• Padding: Innenabstand zwischen Content und Border
• Border: Rahmenlinie um das Element
• Margin: Außenabstand zwischen Element und Nachbarn

div {
    width: 200px;
    padding: 10px;
    border: 5px solid #2b7cff;
    margin: 20px;
}

2. Padding

• padding-top, padding-right, padding-bottom, padding-left
• Kurzschreibweise: padding: 10px 20px; (oben/unten, rechts/links)

p {
    padding: 10px;
    background-color: #f4f4f4;
}

3. Border

• border-width, border-style, border-color
• Kurzschreibweise: border: 2px solid black;

div {
    border: 3px dashed #2e9a6a;
}

4. Margin

• Kurzschreibweise: margin: 20px 10px; (oben/unten, rechts/links)
• Negative Werte möglich, um Elemente zu überlappen

h1 {
    margin: 30px 0;
}

5. Box-Sizing

• content-box (Standard): Breite = nur Content
• border-box: Breite = Content + Padding + Border

div {
    width: 200px;
    padding: 10px;
    border: 5px solid black;
    box-sizing: border-box;
}

6. Zusammenfassung

• Boxmodell = Content + Padding + Border + Margin
• Padding = Innenabstand, Margin = Außenabstand
• Border = Rahmen des Elements
• box-sizing beeinflusst Berechnung der Breite/Höhe