zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie verhalten sich überlappende padding und margin Angaben: (Plus, Min oder Max)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.09.2007, 16:20
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.09.2003
Beiträge: 243
braindead befindet sich auf einem aufstrebenden Ast
Standard 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)?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.09.2007, 14:28
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Hallo braindead,

zu 1. es wird nur der größere „margin“ gezählt, also Antwort b).
zu 2. der „margin“ wird nicht gezählt, egal wie groß er ist. Es gibt aber Ausnahmen.

Suche nach „collapsing margins“.

Grüße: Emil
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.09.2007, 15:06
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.09.2003
Beiträge: 243
braindead befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 21.09.2007, 15:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von braindead Beitrag anzeigen
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?
Nein. Nur Margins kollabieren, nicht Padding.
Collapsing Margins
Uncollapsing Margins (Complex Spiral Consulting)
Mit Zitat antworten
  #5 (permalink)  
Alt 21.09.2007, 15:24
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.09.2003
Beiträge: 243
braindead befindet sich auf einem aufstrebenden Ast
Standard

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 15:29 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 21.09.2007, 15:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von braindead Beitrag anzeigen
Ich bin mir nicht sicher ob ich verstehe was du jetzt mit kollabieren meinst
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.
Mit Zitat antworten
  #7 (permalink)  
Alt 21.09.2007, 15:45
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.09.2003
Beiträge: 243
braindead befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 21.09.2007, 15:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von braindead Beitrag anzeigen
Sobald ein Padding im Spiel ist (im Elternelement) kollabiert nichts mehr und insbesondere werden dann Padding und Margin ignoriert,
Nein. Wie kommst du nur darauf?
Mit Zitat antworten
  #9 (permalink)  
Alt 21.09.2007, 19:04
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.09.2003
Beiträge: 243
braindead befindet sich auf einem aufstrebenden Ast
Standard

Steht in deinem zweiten Link und das ist auch das Verhalten was ich hier im FF sehen kann.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 21.09.2007, 19:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Dann verstehe ich wohl nicht, was du unter "ignoriert" verstehst.
Poste bitte ein Beispiel.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 16:53
z-index hoch, dennoch grafik nicht ganz oben bergg CSS 6 27.10.2010 16:02
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 14:30
Problem mit CSS in Joomla 1.5 noobilicius CSS 6 25.09.2008 20:24
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 22:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:51 Uhr.