CSS Innenabstand

0 | 3669 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "CSS Innenabstand" mit Ihrem Wissen!

Anzeige Hier werben

Was ist padding

padding ist stur übersetzt erst einmal ein Puffer.
Das beschreibt padding aber schon recht gut. Sehen wir und einfach mal dieses Bild an.

Bild zu CSS Innenabstand

Hier ist das entsprechende Beispiel:

 
HTML
1
2
3
4
5
<div style="padding: 20px; border: 1px solid #000;">
   <div style="height: 200px; background: #efd695; padding: 10px;">
      foobar
   </div>
</div>

Aufbau von padding

Bei padding gibt es verschiedene Schreibweisen.
Man kann jede einzelne Seite, alle Seiten, zwei Seiten oder nur einer einen Innenabstand geben.
Hier nun die Beispiele dazu:

Jede einzelne Seite

 
css
1
2
/* 10px oben    20px rechts     30px unten  40px links */ 
padding:    10px 20px 30px 40px; 

Eselsbrücke:

padding: x x x x kann man sich gut anhand der Uhr merken, also das das Ganze im Uhrzeigersinn für die Abstände nach oben, rechts, unten, links.

alle Seiten

 
css
1
padding:    10px; 

zwei Seiten

 
css
1
2
/* 10px  oben   20px rechts/links   30px unten */
padding:    10px 20px 30px; 

Zusammenfassung

Anzahl der Werte bei padding:
Auswirkung
Beispiel
1 Wert
Dieser Wert betrifft alle 4 Seiten
padding: 10px;
2 Werte
Der 1. Wert betrifft den oberen und unteren Innenabstand, der 2. links und rechts
padding:10px 20px;
3 Werte
Der 1. Wert betrifft den oberen, der 2. den linken und rechten, der 3. den unteren Innenabstand
padding:10px 20px 30px;
4 Werte
Der 1. Wert betrifft den oberen, der 2. den rechten, der 3. den unteren und der 4. den unteren Innenabstand padding:10px 20px 30px 40px;

einzelne Seiten

 
css
1
2
3
4
padding-top:    10px; 
padding-right:  20px; 
padding-bottom: 30px; 
padding-left:   40px; 

Es empfiehlt sich aber die kurze Schreibweise zu benutzen.

Zusammenspiel Innenabstand und Breite

Die Gesamtbreite ist die Kombination aus Innenabstand und Breite.

Nehmen wir das Beispiel von oben

 
css
1
2
padding:    10px 20px 30px 40px; 
width:      200px; 

Daraus würde sich eine wirkliche Breite von 260 Pixel ergeben. Da 200 + 20 + 40 = 260 ergibt.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite "CSS Innenabstand" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS Innenabstand" hier bearbeiten.

Mitarbeiter
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • Meine Schwerpunkte liegen im Bereich Grafikdesign, SEO und Management. Seit sieben Jahren bin ich als Geschäftsführer der Team23 GbR tätig, die Webdesign in Augsburg anbietet, sowie Webmasterpro.de betreut.
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • Kinderturnen - Sport Spiele für Kinder
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.