From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/padding/index.html | 125 ++++++++++++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 files/de/web/css/padding/index.html (limited to 'files/de/web/css/padding') diff --git a/files/de/web/css/padding/index.html b/files/de/web/css/padding/index.html new file mode 100644 index 0000000000..96406d0299 --- /dev/null +++ b/files/de/web/css/padding/index.html @@ -0,0 +1,125 @@ +--- +title: padding +slug: Web/CSS/padding +tags: + - CSS + - CSS Eigenschaft + - CSS Innenabstand + - CSS Referenz + - Layout + - Web +translation_of: Web/CSS/padding +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die padding Eigenschaft ist eine Kurzform für die Innenabstände aller vier Seiten eines Elementes. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem Rahmen (auch: padding area).

+ +

{{cssinfo}}

+ +

Syntax

+ +
padding:   [ <Längenangabe> | <Prozentzahl> ] {1,4} | inherit
+ +

Werte

+ +

Es werden bis zu vier der folgenden Werte akzeptiert:

+ +
+
<Längenangabe>
+
Legt eine bestimmte Länge fest. Negative Werte sind nicht erlaubt.
+
<Prozentzahl>
+
Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte nicht sind erlaubt.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
Ein Wert
+
Gilt für alle vier Seiten.
+
Zwei Werte
+
Der erste Wert bestimmt die oberen und unteren Abstände, der zweite Wert legt die Abstände rechts und links fest.
+
Drei Werte
+
Der erste Wert bestimmt den oberen Abstand, der zweite Wert legt die Abstände für rechts und links zusammen fest und der dritte Wert bestimmt den unteren Abstand.
+
Vier Werte
+
Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: oben, rechts, unten, links.
+
+ +

Beispiele

+ +
padding: 5%;                /* 5% Abstand auf allen Seiten */
+
+padding: 10px;              /* 10px Abstand auf allen Seiten */
+
+padding: 10px 20px;         /* oben und unten 10px */
+                            /* links und rechts 20px */
+
+padding: 10px 3% 20px;      /* oben 10px */
+                            /* links und rechts 3% */
+                            /* unten 20px */
+
+padding: 1em 3px 30px 5px;  /* oben 1em */
+                            /* rechts 3px */
+                            /* unten 30px */
+                            /* links 5px */
+
+ +

border:outset; padding:5% 1em;

+ +

Livebeispiel

+ +

HTML Inhalt

+ +
<h4>Hallo Welt!</h4>
+<h3>Der Innenabstand ist in dieser Zeile anders.</h3>
+ +

CSS Inhalt

+ +
h4 {
+  background-color: green;
+  padding: 50px 20px 20px 50px;
+}
+
+h3{
+  background-color: blue;
+  padding: 400px 50px 50px 400px;
+}
+ +

{{ EmbedLiveSample('Livebeispiel') }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}{{ Spec2('CSS3 Box') }}keine Änderung
{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }}{{ Spec2('CSS2.1') }}keine Änderung
{{ Specname('CSS1', '#padding', 'padding') }}{{ Spec2('CSS1') }}Ursprüngliche Definition
+ +

Browserkompatiblität

+ +{{Compat("css.properties.padding")}} + +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf