Verständnisfrage zu padding

[avalon]

Hallo Leute,

Habe mir nun ein Buch gekauft um endlch mal mein Design komplett in CSS umwandeln zu können. Passt bisher auch schon alles ganz gut nur eine Verständnisfrage zu padding habe ich noch.

Mit padding bestimmt man ja das innere einer Box.
Falls ich also:
padding-top: 10px 20px 0px 0px;
schreibe - müsste der innere Text 10px von oben und 20px von rechts enfernt sein.
Das klappt auch eigentlich recht gut... nur warum wird meine Box dann grösser? Das zerschießt mir mein komplettes Layout?!

gruss
danke schonmal im vorraus

 

[Efchen]

Falls ich also:
padding-top: 10px 20px 0px 0px;
schreibe - müsste der innere Text 10px von oben und 20px von rechts enfernt sein.

Nein. Das was Du da geschrieben hast, ist schlicht falsch.
Du definierst den oberen Innenabstand, schreibst aber 4 Werte hin. Das geht nicht. Wenn dann müsste es

padding: 10px 20px 0px 0px;

heißen. "0" ist übrigens kürzer als "0px" :-)

nur warum wird meine Box dann grösser?

Weil das so im Box Model definiert ist.
Die Größe einer Box errechnet sich wie folgt:

Außenabstand (beidseitig) + Rahmen (beidseitig) + Innenabstand (beidseitig) + width/height

Das zerschießt mir mein komplettes Layout?!

Dann hast Du Deine Größen schlicht falsch berechnet.

 

[avalon]

ja da haben wir wieder ^^
du hast mir damals schon geholfen :)
merci

also das mit padding-top... da haste recht... sitz gerade auf der arbeit und mir hat die frage da noch auf der zunge gebrannt daher hab ichse schnell runtergerattert ^^

warn dummer fehler ... :) (war schon padding nur mit gemeint)


aha... also muss ich falls ich nun meine box 200px breit haben möchte.. möchte aber nen innenabstand von 20px haben
z.B. schreiben:

width: 180px
padding: 0 20 0 0;

 

[Efchen]

Abgesehen davon, dass Du diesmal die Einheit bei Deinem Innenabstand vergessen hast, ja. Diese Box ist 180px + 20px = 200px breit.

Installier Dir Firebug (Plugin für Firefox), da kannst Du Dir das Layout eines jeden Elements anzeigen lassen. Firebug zeigt Dir dann gleich den Offset des Elements, die Abstände und Größen.

 

[avalon]

danke...

besonders für die schnelle antworten immer
und dein nick find ich ja sowieso genial ^^