Kennt ihr padding? 16. August 2005 um 21:12 Uhr /
Ich möchte ein bischen Werbung für die CSS Eigenschaft padding
machen. Immer wieder streife ich durch das Internet und finde Seiten, deren Ersteller anscheinend noch nie etwas von Abstand gehört haben. Dabei sieht man doch auf den ersten Blick, dass da irgendetwas nicht passt:
Hier sehen wir einen Text in einer Box, die an den Innenseiten keinen Abstand hat. Vor allem auf Seiten von Programmierern findet man so etwas. Ist ja kein Wunder werden sich die Programmierer von euch Denken, wir sind ja keine Designer. Das ist durchaus verständlich, aber hier mal ein kleiner tipp von einem Designer: Nutzt padding
und Weißraum für eure Seiten!
Dann wirkt die Seite gleich viel befreiter, luftiger, strukturierter und einfach angenehmer zu lesen. Vergleicht einfach mal diese zwei Absätze, für ein »professionelles« Aussehen braucht es gar nicht so viel Grafik sondern eher angenehme Farben und Abstände.
So, dies nur mal so ganz schnell als praktische Hilfe an alle, die mit ihrem Design kämpfen, da es mir in letzter Zeit vermehrt aufgefallen ist. Es ist oft auch eines der wenigen Dinge die ich auf diesen Seiten verändern würde. Wenn euch auch ähnliches aufgefallen ist und ihr kleine Tipps geben wollt scheut euch nicht zu kommentieren — oder falls ihr allgemeine Fragen zu Design habt auch immer her damit.
Kommentare
Die Kommentare sind für diesen Eintrag geschlossen.
blogerich schrieb am 16.08.2005
Auf meinen Seiten nutze ich padding und margin immer für Grafiken und Texte. Lange wusste ich nicht wirklich etwas damit anzufangen, doch mittlerweile kann ich es mir ohne gar nicht mehr vorstellen.
Da ich immer mehr zu css hingehe sehe ich die enormen Vorteile der formartierung gegenüber der "frimelei" einzelner Seiten, Texte und dergleichen.
Seit ich deine Seiten "durchforste" arbeite ich nicht mehr nur mit der Maßeinheit px. Das habe ich vorher immer, egal bei was, getan. Anregungen finde ich hier reichlich und immer wieder, Thanks......
P.ss.: Außer
Und meine Farbkombinationen sind einfach nur Schön. :-)
Jeena aus Varberg schrieb am 16.08.2005
Björn schrieb am 17.08.2005
Ein wirklich guter Hinweis. Deine Beobachtungen kann ich bestätigen.
Ich verwende Padding bei <em>DEN</em> Elternelementen, also meinen DIVs für die Hauptbereiche nur für vertikale Abstände. Horizontal arbeite ich lieber mit margin für die enthaltenen Elemente, weil ich wegen der unterschiedlichen Interpretationsweisen der Browser keine Lust auf allzu viele Browserweichen habe.
macx aus Hannover schrieb am 17.08.2005
Ich nehme nicht wirklich Rücksicht auf diverse Browser, ich setze auf den Standard. Dieses Vorgehen erspart es mir nämlich, meine Webseite umzuprogrammieren, sobald die Browserhersteller neue Updates ihrer Software rausbringen.
Zum Padding: Ich komme ursprünglich aus dem Printbereich, und jeder dort verankerte Designer, respektive Layouter, kennt padding (Den inneren Versatz des Textes zu seiner Box oder Spalte) und margin (Äusserer Abstand der Box zu anderen Objekten). Leider nur ist das Verhalten von padding im Print zum Web grundsätzlich anders, da die W3C-Leute offensichlich keine Ahnung vom Print haben: Im Web wird das padding zu der Boxbreite hinzuaddiert, im Printbereich subtrahiert. Und das macht Sinn: Wenn meine Spalte in der Zeitung nunmal 10 cm breit ist, ist sie definitv 10 cm breit, und nicht 10 cm + 2 cm für den Versatz. Aber so sind nunmal die Regeln im Web: Auch daran halte ich mich.
Wer beides im Kopf behält, behält gut den Überblick.
Detlef G. aus Guben schrieb am 17.08.2005
Es geht ja auch nicht um Print ;-)
Ich finde dieses Verhalten im Web durchaus sinnvoll.
Im Printbereich geht jedes Layout von der Seitengröße aus, diese ist bekannt, und der Inhalt muss sich dort einfügen.
Die Größe des Browserfensters ist aber unbekannt, wenn sie nicht reicht, werden Scrollbalken gebildet. Wenn ich die Größe des Inhalts extra angebe, finde ich es durchaus logisch, padding zu addieren.
Wenn ich keine inhaltsbezogenen Maße angebe, wir die zur verfügung stehende Breite benutzt und die benötigte Höhe verwendet.
Manuel aus Dortmund schrieb am 17.08.2005
ebenso könnte man sehr oft fragen ob die leute schonmal was von line-height gehört haben ;)
macx aus Hannover schrieb am 19.08.2005
@Detlef
Warum sollte sich Print vom Web unterscheiden? Im Zeitalter des Corporate Designs halte ich gleiche Definitionen schon für sinnvoll.
Ich finde die Addierung von padding weiterhin unlogisch. Kleines Beispiel: Mein Browserfenster ist immer 100% breit. Wenn ich nun eine rechte Spalte mit 20% habe, dann daneben eine mit 80%, dann führt die Addition nunmal zum Scrollbalken und mehr als 100%. Damit meine Box ohne Scrollbalken (den wir ja eigentlich immer vermeiden wollen) korrekt abgebildet wird, müssten wir das Padding von der Boxbreite abziehen, um zum gewünschten Ergebnis zu kommen. Leider kann ich mit CSS noch nicht rechnen (ist übrigens als Idee angedacht). Zusammengefasst: Wenn ich möchte, dass meine Box eine bestimmte Breite hat, dann möchte ich diese Breite auch erzielen können. Breite der Box + padding != Breite der Box wie definiert. ;-)
Benni schrieb am 28.08.2005
Jap, und erneut wird wunderschön das Box-Model-Problem Mozilla vs. Microsoft demonstriert ;-).
(Und Web und Print sind ungefähr so ähnlich wie Autos und Kühlschränke...)
Jeena aus Varberg schrieb am 29.08.2005
Das ist kein Problem Mozilla v. Microsoft, sondern ein reines MS Problem, denn alle anderen halten sich brav an die Vereinbarungen ;-)
macx schrieb am 08.09.2005
@Benni
In Zeiten von Corporate Design, Wiedererkennungswert und die Etablierung des Internets als alternatives Medium zur Zeitung sollte man Web und Print gleichermaßen beurteilen. Wenn meine Spalte in der Zeitung 50 mm breit ist, und ich möchte einen inneren Versatz von 2 mm, dann würde mich der Drucker schlagen, wenn ich mit einer Spalte von 54 mm ankomme - das sind exakt 4mm zu viel. Wenn ich im Internet eine Box anlege mit 2 em oder 50%, dann möchte ich auch, dass die mit innerem Versatz nicht größer ist. "Padding" ist nichts anderes als der "innere Versatz". Im Web ist leider der innere Versatz laut W3C ein äußerer Versatz, der so dargestellt wird wie ein innerer Versatz.
Diese Problematik ist übrigens auch dem W3C bekannt. In CSS3 wird es eine Implemantation geben, wo du entscheiden kannst, ob das padding abzüglich der Breite einer Box oder zuzüglich gehandhabt wird: http://www.w3.org/TR/css3-ui/#box-sizing
Spätestens dann hatt man wirklich Einfluss auf die exakte Breite seiner Objekte, auch wenn sie relative Größen haben.
Jeena Paradies aus Varberg schrieb am 08.09.2005
Ich habe mir auch schon öfter gedacht, dass der IE 5.x das eigentlich elleganter löst, aber irgendwie hatte ich das Gefühl das lieber nicht laut zu sagen ;-) Wie auch immer; auch Andy Budd macht sich in seinem Blog: »Internet Explorer and the Box Model« über genau diese Sache, und das noch gar nicht so lange her.