CSS-Randabstand für Ober- und Seiten unterschiedlich

Ich hoffe, dass jemand mir helfen kann, da ich mich eher dumm fühle, wenn ich eine solche Frage hier stelle. Ich bin kein Webdesigner, bin aber mit der Erstellung eines Basislayouts beschäftigt. Das Layout wird auf einem integrierten Gerät mit einem Standard-Browser verwendet werden, so dass einige der Browser-spezifischen CSS-Tags .. d. H .: -moz-border-radius nicht notwendigerweise mit IE und so arbeiten müssen.CSS-Randabstand für Ober- und Seiten unterschiedlich

Ich habe eine 1024x768 Seite, die ich ein paar Blockabschnitte haben möchte. Diese Abschnitte haben auf jeder Seite 4 px Platz. Also sollte ein 2x2 Raster 4px Lücke (schwarz) auf der Außenseite der ganzen Seite haben, während die Innenseiten 8px Lücke zwischen den Boxen haben (4px auf der rechten Seite einer Box, und 4px auf der linken, oder 4px auf der Unterseite von Eins und 4px auf der Oberseite, et)

Wenn ich jedes dieser divs CSS zu Rand: 4px setze; Ich bekomme die äußere Lücke von 4px. Ich bekomme auch eine horizontale Lücke von 8px zwischen der linken und rechten Seite der Boxen. Das Problem ist, dass der vertikale Abstand 4px ist, wie einer der Viertel-Boxen keinen oberen oder unteren Rand anwendet. Ich denke nicht, dass das etwas ist, was passieren sollte, also denke ich, dass ich irgendwo einen Fehler gemacht habe.

Vielen Dank im Voraus - dieser Ort ist super.

Quelle

2010-11-18 David Houde

Das liegt an 'Randkollaps': Der kleinste benachbarte vertikale Rand wird im einfachsten Fall ignoriert.

Quelle

2010-11-18 23:18:21

Danke für die schnelle Antwort. Bitte sehen Sie Frage 2 ab, wenn Sie einen Einblick haben. Danke noch einmal! –

Eine Option besteht darin, einen transparenten Einzelpixelrahmen um jedes Objekt anzubringen. Natürlich müssen Sie diese Änderung berücksichtigen, aber es ist eine einfache schnelle Lösung, wenn Sie absolute Werte für Dimensionen verwenden. –

Btw, das ist eine gute Referenz: http://reference.sitepoint.com/css/collapsingmargins –

Probieren Sie Padding statt Rand.

Der größte Abstand zwischen zwei Objekten wird als Abstand zwischen ihnen verwendet.

Wenn object_a eine Marge von 4, und object_b eine Marge von 6 hat, wenn man sie nebeneinander platzieren, wird sie eine Marge von 6

haben Wenn Sie Polsterung verwenden, es ist eher ein schafft Blase um sie herum und kombiniert die Entfernung.

Wenn object_a eine Polsterung von 4, und object_b hat eine Polsterung von 6, wenn man sie nebeneinander platzieren, werden sie eine Polsterung von 10.

UPDATE haben - dank @Bobby Jack

Horizontale Ränder kollabieren nie. Nur vertikal.

Quelle

2010-11-18 23:19:42

Danke für die schnelle Antwort. Ich lerne jeden Tag etwas Neues. Kennen Sie den einfachsten Weg, dies mit meinem Layout zu erreichen? Wenn ich margin verwende, erzeugt es Platz außerhalb des div. Wenn ich Padding verwende, erzeugt es Platz innerhalb des div und macht das div 4px auf jeder Seite breiter. Ich kann diese Idee mit der Verschachtelung der Divs sehen und das Outside Div mit einer Füllung von 4px transparent halten. Ich weiß nur nicht, ob das der eleganteste Weg ist, wenn das kein Problem ist. Ich möchte nur sicherstellen, dass ich nichts verpasse. –

Es ist wichtig zu beachten, dass der Randzusammenbruch nur vertikale Ränder beeinflusst. Ihre Verwendung des Begriffs "nebeneinander" könnte anders ausgedrückt werden. –

@ Bobby - Wirklich? Ich habe noch nie davon gehört, hast du einen Artikel? Es scheint, dass es mich immer beeinflusst hat. –

CSS-Randabstand für Ober- und Seiten unterschiedlich

Antwort

Verwandte Themen