CSS: Padding erstellen – CSS Kurs

Nicht deine Sprache?

Ein Padding in CSS ist ein definierter Abstand um das Element in Pixel oder in Prozent

Beispiel: CSS Padding

.padding-beispiel{

/* Padding ist überall gleich */

padding:50px;
border: 1px solid #4CAF50;

}

Ergebnis

Dieser Container hat ein Padding von 50px

Kurzschreibweise von Padding mit 4 Werten

Du kannst das Padding für jede Seite einstellen, es muss nicht überall 50px sein. Die Kurzschreibweise sieht dann so aus.

.padding-beispiel2{

/* Top, Right, Bottom, Left */

padding: 25px 50px 75px 100px;

}
  • top padding ist 25px
  • right padding ist 50px
  • bottom padding ist 75px
  • left padding ist 100px

Ergebnis

So sieht dann die Kurzschreibweise aus.

Dies ist das Padding

Kurzschreibweise von Padding mit 3 Werten

Wenn die Padding Schreibweise nur 3 Werte hat dann ist es so gemeint:

.padding-beispiel3{

/* Top, Right, Bottom */

  padding: 15px 40px 25px;

}

Ergebnis

Dies ist das Padding

Kurzschreibweise von Padding mit 3 Werten

Wenn die Padding Schreibweise nur 2 Werte hat dann ist es so gemeint:

.padding-beispiel4{

/* Top, Right */

  padding: 15px 30px;

}

Ergebnis

Dies ist das Padding

Jeden Padding Wert einzeln definieren

Du hast auch die Möglichkeit jeden einzelnen Padding Wert mit dieser Schreibweise zu definieren.

.padding-beispiel5{

  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 30px;
  padding-left: 40px;

}

Ergebnis

Dies ist das Padding

Fazit

Wenn du in CSS ein Padding erstellen möchtest geht das relativ einfach. Allerdings gibt es dafür mehrere verschiedene Schreibweisen. Ich habe dir die wichtigsten versucht verständlich zu erklären. Viel Spaß mit CSS!


Über Mich





Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
smileys


HTML: Salbei Farbe HEX – Farbcode 🌈 – So gehts

Wenn du verschiedene Salbei Töne abbilden musst. Dann kannst du diesen ganz einfach selber erstellen...

Windows 11: Zeitzone ändern und einstellen

Hey du verrückter Zeitreisender! Wenn du dich in einem falschen Zeitalter oder unter der falschen...

Google Disavow Tool

Das Disavow Tool ermöglicht es dir, Google mitzuteilen, welche Backlinks du nicht in deinem Backlinks...

Raspberry Pi : Neustarten – So gehts

Wenn du deinen Raspberry Pi neu starten möchtest, kannst du dies auf einfache Weise tun...

Trust Wallet: Wiederherstellen – So gehts

Wenn du ein neues Handy hast oder dein Trust Wallet App gelöscht hast musst du...

Trust Wallet: Handy verloren?! – Kein Problem

Wenn man sein Handy verliert ist es ärgerlich. Wenn darauf noch das Trust Wallet war...

Website Link erstellen: So gehts! Generator 2024

So funktioniert der Link Generator 2024 Was sind Links? (Hyperlinks) Links ist der Verweis von...

Raspberry Pi: SSH aktivieren – So gehts

In diesem Hilfebeitrag werde ich dir erklären, wie du SSH auf deinem Raspberry Pi aktivieren...

Youtube Einnahmen Rechner

Youtube Einnahmen Rechner 2024 Wie hoch deine Youtube Einnamen sein werden, lässt sich oft so...

Raspberry Pi: Teamviewer installieren – So gehts

In diesem Beitrag werde ich dir zeigen, wie du TeamViewer auf deinem Raspberry Pi installieren...

Whatsapp: Status löschen – So gehts

In der heutigen Zeit ist WhatsApp nicht mehr aus unserem Alltag wegzudenken. Es ist eine...

100+ Chkdsk Befehle die ganze Liste

Chkdsk ist noch viel effektiver wenn du es mit den richtigen Befehlen bedienst. Damit lässt...

100+ ROS Terminal Befehle mit Erklärung

ROS (Robot Operating System) ist ein Framework, das es ermöglicht, Roboteranwendungen einfach zu entwickeln. In...

100+ Geogebra Befehle für schnelles arbeiten

Geogebra ist noch viel effektiver wenn du es mit Shortcuts bedienst. Damit lässt sich noch...

Ubuntu/Linux: Gnome im Terminal installieren

Du benutzt Linux bzw. Ubuntu und möchtest Dash to Dock über das Terminal installieren? Kein...