|
|||
Wie verhalten sich überlappende padding und margin Angaben: (Plus, Min oder Max)
Das ist jetzt eine ganz blöde Frage aber wie wirken sich margin und padding Angaben unterschiedlicher Elemente gegeneinander aus, dazu zwei Beispiele:
1. 2 Div Blöcke untereinander angeordnet, das obere besitzt einen margin-bottom von 10 pixeln und das untere besitzt einen margin-top von 20 pixeln. Was passiert jetzt a) der Abstand zwischen beiden Blöcken beträgt 30 pixel oder b) der Abstand beträgt 20 pixel verwendet wird also die größere von beiden Angaben c) der Abstand beträgt 10 pixel, die kleinere der beiden Angaben und das 2. Beispiel, ähnliches Problem Ein Div Blöck mit einer padding Angabe von 10 pixeln, enthällt ein anderes (Block-) Element (oder ein Bild) mit einer margin Angabe von 20 pixeln (alternativ eine Angabe von 5 pixeln) Was passiert hier, die Fälle sind analog zum ersten Beispiel und wie sieht es aus wenn das Bild eine margin Angabe von 5 pixelns bestizt (also einen kleineren Margin als das Div padding)? |
Sponsored Links |
Sponsored Links |
|
|||
Ach, das Verhalten im 2. Beispiel ist ja sehr interessant, d.h. also das selbst wenn der margin-top z.b. größer ist als der padding-top des umschließenden Elternelementes wird nur der Padding des Elternelementes berücksichtig? Sehr merkwürdig, denn wann hat man schonmal ein marginbehaftetes Element das sich nicht in einem Elternelement befindet? Aber gut, ich werde deinem Hinweis mal nachgehen.
|
|
|||
Zitat:
Collapsing Margins Uncollapsing Margins (Complex Spiral Consulting) |
|
|||
Ich bin mir nicht sicher ob ich verstehe was du jetzt mit kollabieren meinst (ich kenne das in einem eher desktruktiven Zusammenhang), jedenfalls glaube ich jetzt zu verstehen das es wohl so ist das das margin nicht irgent ein allgemeine Außenabstand ist, sondern konkret der Außenabstand zu einem Benachbartem Element, und der Rand des Elternelement zählt in diesem Fall überhaupt nicht.
So wäre mir auch klar wieso da nur das Padding gilt, wenn ich da nicht dieses merkwürdidige verhalten beobachtet hatte, ich habe also ein Div mit padding:10px und darin ein p Tag mit einem margin-top und absolut zweifelsfrei sorgt eine Variation des margin-tops für eine Verschieibung dieses p-Tags in dere Vertikalen. D.h. nur bei margin-top:0px ist der Abstand zwischen dem Rand des Divs und dem Rand des Ps wirklich 10 Pixel bei größeren Abgaben wird das ganze entsprechende auf den Padding addiert Und um auf den anderen Teil zurückzukommen, ich habe mir dein Beispiel mit den collabierenden margins angeschaut und verstehe nun wie es zwischen benachbarten Divs wirkten, insbesondere das Detail wenn eines der margin Angaben negativ ist (das dann vom positiven margin der Wert abgezogen wird) Geändert von braindead (21.09.2007 um 16:29 Uhr) |
|
|||
Kollabieren ist die deutsche Übersetzung von "collapse". Ich meine also genau das, was die Spezifikation unter collapsing versteht. Es gibt collapsing margins, keine collapsing paddings.
|
|
|||
Na gut ich glaub ich habs jetzt verstanden. Sobald ein Padding im Spiel ist (im Elternelement) kollabiert nichts mehr und insbesondere werden dann Padding und Margin ignoriert, wenn das padding aber auf 0 steht dann wird der Margin in der Tag ignoriert zumindest kollabieren die Abstände dann und es sieht so aus.
|
|
|||
Nein. Wie kommst du nur darauf?
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
z-index hoch, dennoch grafik nicht ganz oben | bergg | CSS | 6 | 27.10.2010 17:02 |
Problem mit einem 3D-Effekt | moep0710 | CSS | 12 | 12.06.2010 15:30 |
Problem mit CSS in Joomla 1.5 | noobilicius | CSS | 6 | 25.09.2008 21:24 |
Linkverhalten im IE6 | ChOpSueY! | CSS | 19 | 19.05.2008 23:48 |