Warum hat das Festlegen des Randes für ein div keinen Einfluss auf die Position des Inhalts der Kinder?

Question

Ich möchte etwas klarer verstehen, wie sich CSS-Margen mit Divs und Kindinhalten verhalten.

Wenn ich das versuche...

...ist die Schaltfläche "Speichern" direkt neben der Benutzerrolle (Margenfehler):

---

Margenfehler :( http://img697.imageshack.us/img697/8459/nomargin.jpg

---

Wenn ich es auf diese Weise ändere...

...gibt es eine Lücke zwischen der Schaltfläche "Speichern" und der Benutzerrolle (Margengewinn):

---

Margengewinn :) http://img20.imageshack.us/img20/1973/yesmargin.jpg

---

Fragen:

Kann mir jemand erklären, was ich beobachte? Warum bewirkt das Hinzufügen eines Randes zum div nicht, dass das input nach unten verschoben wird? Warum muss ich den Rand direkt auf das input setzen? Es muss ein grundlegendes Gesetz des CSS geben, das ich nicht verstehe.

Answer 1

Dies würde daran liegen, dass das div kein Element hat, von dem es sich "wegschieben" kann. Es scheint, dass das select, das vor dem div steht, auf der linken Seite steht. Dadurch wird es aus dem normalen Seitenfluss genommen und dient nicht mehr als Referenz für die Berechnung des Randes. Das div löscht den float, d.h. es fällt darunter, überprüft dann, ob es einen 2em-Rand zum nächsten Element darüber gibt, das sich im selben "Fluss" befindet. Offensichtlich gibt es das, also bewegt es sich nicht weiter nach unten.

Das Setzen des Randes am submit hingegen ist sehr klar definiert, da der Bezugspunkt dafür das übergeordnete div ist.

Answer 2

Das Hinzufügen eines Abstands zu einem Element wirkt sich nur auf den Rand dieses Elements aus. Erwartest du, dass er geerbt wird oder so etwas? Das ist nicht der Fall. Vielleicht denkst du an padding? Versuche es damit:

Siehe Box-Modell:

Eine weitere Sache zu beachten bezüglich der Ränder ist, dass sie zusammengeführt werden. Also:

one
two

mit:

div { margin: 1em; }

ergibt nur einen 1em-Abstand zwischen ihnen, nicht 2em. Siehe 8.3.1 Kollabierende Ränder:

Vertikale Ränder können zwischen bestimmten Boxen kollabieren:

• Zwei oder mehr benachbarte vertikale Ränder von Block-Boxen im normalen Fluss kollabieren. Die resultierende Ränderbreite ist das Maximum der benachbarten Ränderbreiten. Im Fall von negativen Rändern werden die absoluten Werte der negativen benachbarten Ränder vom Maximum der positiven benachbarten Ränder abgezogen. Wenn es keine positiven Ränder gibt, werden die absoluten Werte der negativen benachbarten Ränder vom Nullpunkt abgezogen. Hinweis. Benachbarte Boxen können von Elementen erzeugt werden, die nicht als Geschwister oder Vorfahren in Beziehung stehen.

Ein mögliche Erklärung für das, was du siehst, ist, dass das Element vor deinem div bereits einen Rand hat (unten), weshalb es nicht durch das Hinzufügen eines Rands zu deinem div nach unten gedrückt wird.

Um es zu verstehen, setze einfach Rahmen um die Elemente und du solltest sehen, was passiert.

Answer 3

Was im ersten Beispiel passiert, ist dass die schwebenden Elemente über dem Button außerhalb ihres übergeordneten Elements schweben.

Der Rand funktioniert einwandfrei, aber er befindet sich nicht zwischen den schwebenden Elementen und dem Button, sondern zwischen dem übergeordneten Element der schwebenden Elemente und dem Button. Das übergeordnete Element hat keine nicht schwebenden Elemente, daher ist seine Höhe null und die schwebenden Elemente überlappen den Rand.

Answer 4

In deinem ersten Beispiel setzt du einen Rand am DIV selbst. Denke an das DIV als Block, der die verschachtelten Elemente enthält. In diesem Fall wäre das verschachtelte Element die Schaltfläche. Wenn du Folgendes tust, wie du es getan hast:

Beeinflusst du nicht den Stil der untergeordneten Elemente. Obwohl sich die relative Position deiner Schaltfläche ändern kann, änderst du tatsächlich nicht den Stil des untergeordneten Elements. Nun durch das folgende:

Setzt du jetzt den Rand der untergeordneten Elemente. Dies wird ein unterschiedliches Ergebnis haben. Das Setzen dieses Rands der untergeordneten Elemente wird sich nicht auf das übergeordnete Element (das DIV) auswirken.