Warum ist 10px + 10px = 10px?

8

Ich habe das folgende Skript, wo der Rand für die. Portlet-Klasse verhält sich merkwürdig:

Ссылка

Es sollte 10px um jedes Portlet hinzugefügt werden, was eine Lücke von 20px zwischen Portlets bedeuten sollte. Aus irgendeinem Grund bekomme ich nur 20px, wenn ein Portlet ein Widget rechts oder links von sich selbst hat, aber nur 10px, wenn das Portlet ein anderes Portlet darüber oder darunter hat.

Warum bekomme ich 10px vertikal?

    
oshirowanen 14.03.2011, 11:00
quelle

3 Antworten

11

Da sich die Ränder nicht addieren, fallen sie zusammen. Wenn Sie zwei Elemente A und B haben, A margin = 10px und B margin = 15px, beträgt der Abstand zwischen A und B 15px.

Zwei Lösungen:

  1. Benutze Rand-unten: 20px, Rand-Oben: 0px
  2. Wickeln Sie sie in einen Container und wenden Sie eine Füllung an: 10px 0;
Marcel Jackwerth 14.03.2011, 11:05
quelle
7

Da die Ränder zusammenfallen, werden sie nicht hinzugefügt, nur max() -ed (der größte Randwert benachbarter Objekte wird verwendet). Verwenden Sie Auffüllen, wenn der Raum Teil Ihres Elements ist.

    
vbence 14.03.2011 11:04
quelle
5

So funktionieren Margen. Benachbarte vertikale Ränder kollabieren ineinander:

  

Zwei oder mehr angrenzende vertikale Ränder von Blöcken auf Blockebene im normalen Flusszusammenbruch. Die resultierende Randbreite ist das Maximum der angrenzenden Randbreiten. Bei negativen Margen wird das Maximum der absoluten Werte der negativen angrenzenden Margen vom Maximum der positiven angrenzenden Margen abgezogen. Wenn keine positiven Margen vorliegen, wird das absolute Maximum der negativen angrenzenden Margen von Null abgezogen. Hinweis. Angrenzende Felder können von Elementen generiert werden, die nicht als Geschwister oder Vorfahren verwandt sind.

Siehe auch: Reduzierende Ränder

    
Kobi 14.03.2011 11:05
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Finden Sie versteckte Abhängigkeiten in Ivy