IT-Kurs CSS-Grundlagen 025_Abstände und Polsterung

Abstände

In CSS sind Abstände und Polsterung zwei verschiedene Konzepte, die beide zur Steuerung des Raums zwischen Elementen und zur Beeinflussung des Seitenlayouts verwendet werden.

Abstand (Außenabstand)

Der Abstand (margin) bezeichnet den Raum zwischen einem Element und seinen benachbarten Elementen. Abstände können verwendet werden, um den Abstand zwischen Elementen zu steuern und das Seitenlayout zu beeinflussen. Abstände selbst haben keine Hintergrundfarbe, sind vollständig transparent und beeinflussen nicht die tatsächliche Größe des Elements. Sie können positive oder negative Werte sein, die Einheit kann Pixel (px), Prozent (%), em usw. sein.

Beispiel:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        margin: 10%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        margin: -50px 50px;
11
        background-color: green;
12
    }
13
    .example3 {
14
        margin: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>

Effekt: Mit margin-top, margin-right, margin-bottom, margin-left kann der Abstand in einer bestimmten Richtung einzeln festgelegt werden.

Beispiel:

1
    .example1 {
2
        margin-top: 100px;
3
        margin-right: 50px;
4
        margin-bottom: 80px;
5
        margin-left: 50px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1"></div>

Effekt:

Polsterung (Innenabstand)

Die Polsterung (padding) bezeichnet den Raum zwischen dem inneren Inhalt eines Elements und dem Rahmen des Elements. Polsterung kann verwendet werden, um den Abstand zwischen dem inneren Inhalt und dem Rahmen anzupassen und beeinflusst die Größe und das Layout des Elements. Polsterung erbt die Hintergrundfarbe des Elements und beeinflusst die tatsächliche Größe des Elements. Negative Werte werden nicht unterstützt, die Einheit kann Pixel (px), Prozent (%), em usw. sein.

Beispiel:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        padding: 3%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        padding: 10px 50px ;
11
        background-color: green;
12
    }
13
    .example3 {
14
        padding: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1">Padding-Test</div>
2
    <br>
3
    <div class="base example2">Padding-Test</div>
4
    <br>
5
    <div class="base example3">Padding-Test</div>

Effekt:

Mit padding-top, padding-right, padding-bottom, padding-left kann die Polsterung in einer bestimmten Richtung einzeln festgelegt werden.

Beispiel:

1
    .example1 {
2
        padding-top: 20px;
3
        padding-right: 50px;
4
        padding-bottom: 80px;
5
        padding-left: 10px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1">Padding-Test</div>

Effekt: