CSS Innenabstand
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.
Hier ist das entsprechende Beispiel:
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
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
1 | padding: 10px;
|
zwei Seiten
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
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
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.
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.
-
hat Erfahrungen im Webentwicklungs-Bereich seit mehr als 8 Jahren. Arbeitet als Webentwickler bei einem Verlag in Stuttgart.
-
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.
-
Student der Biochemie und seit einigen Jahren im Hobby-Entwicklerbereich tätig. Stärken in XHTML/CSS und PHP, alles was mit Grafik zu tun hat, gehört nicht dazu.
-
graphic, motion & web design - kernreaktor - mutter kind turnen
-
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Eselsbrücke
Vielleicht ja für den einen oder anderen hilfreich: padding: x x x x merke ich mir immer anhand der Uhr, also das das Ganze im Uhrzeigersinn für die Abstände nach oben, rechts, unten, links.
Re: Eselsbrücke
find ich hilfreich den Tip - hab ihn mal in den Artikel aufgenommen (hoffe das war okay)
du darfst solche sachen auch immer gerne selber dazueditieren. dafür ist es eine wiki seite...
Re: Eselsbrücke
natürlich darfst das, kein Problem. Wusste nicht, ob das noch so hilfreich dann ist bzw. ob das dafür reicht mit dem Tipp ;)
Re: Eselsbrücke
Denke schon das es für viele Anfänger sehr Hilfreich sein kann.
??
sind paddings nicht für die innenabstände eines elements zuständig und nicht wie oben gezeigt (bild) für die außenabstände (margins) ...??
Re: ??
Die Gesamtbreite ist die kombination aus Innenabstand und Breite.
Genau hier hat firefox (oder hatte?) nen heftigen bug, der hier erwähnt werden sollte. Aus diesem Grund nutz ich meist auch margin statt padding.
Re: Die Gesamtbreite ist die kombination aus Innenabstand und Breite.
Ich kenn den Bug auch nur bei IE < 7
Re: Die Gesamtbreite ist die kombination aus Innenabstand und Breite.
IE hatte da nen Bug. FF meines Wissens nicht.
Tabelle
ich habe das mal in eine Tabelle zusammengefasst (zwecks Übersicht). Die einzelnen Beispiele könnte man entfernen