Ich mache einige Tests an float und inline-block und ich habe bemerkt, dass es einen Unterschied zwischen ihnen gibt.
Wie Sie in DIESEM BEISPIEL sehen können, verwende ich display:inline-block divs haben einen kleinen Abstand zwischen ihnen, aber wenn ich float:left verwende, funktioniert es wie erwartet.
Bitte beachten Sie, dass ich Eric Meyers Reset CSS v2.0 verwende.
Liegt es daran, dass ich etwas falsch mache oder verhält sich inline-block (in diesem Fall ist es nicht sehr zuverlässig).
HTML
%Vor%CSS (ohne Zurücksetzen)
%Vor% Geben Sie das übergeordnete Element font-size: 0; an.
Dann setze font-size der Kinder auf font-size: 12px (oder wie groß dein Design ist), wie folgt:
Ich mache ein paar Tests mit Float und Inline-Block und ich habe es bemerkt ist ein Unterschied zwischen ihnen.
Welche Quelle auch immer die Implikation hat, dass sie nicht gleich sein könnten, ist irreführend. Sie sind ganz andere Dinge .
Die Divs haben einen kleinen Abstand zwischen ihnen
Das ist kein margin . Das ist ein Leerzeichen, das sich aus den Zeilenumbrüchen zwischen den div s im HTML ergibt. Eine Lösung wäre, nur die Zeilenumbrüche zu entfernen, ein anderes wäre, font-size: 0 auf das enthaltende Element zu setzen (wodurch die Leerzeichen nicht gerendert werden).
Beachten Sie, dass Sie, wenn Sie die zweite Methode verwenden, ein weiteres font-size auf der inneren div s setzen müssen, da sonst der darin enthaltene Text nicht gerendert wird.
Hoffe das hilft!
Wie ich es verstehe, werden Inline-Block-Elemente mit dem gleichen automatischen Pseudo-Randabstand wie andere Inline-Objekte angezeigt. Floated-Elemente werden im Verhältnis zum Objektfluss des Dokuments als völlig unabhängig behandelt (also keine störenden Lücken).
Entschuldigung, ich kann keine ausführlichere Antwort geben, aber das ist definitiv etwas, mit dem ich schon früher gerungen habe. Für was es wert ist, sollte der Abstand zuverlässig für Inline-Block-Elemente ärgerlich sein, Sie müssen nur daran denken, diese Pseudo-Ränder zu kompensieren, wenn Sie alles versuchen in einem übergeordneten Element enthalten, ohne in die nächste Zeile verschoben zu werden.