Ich habe einige wirklich einfache html / css, die 100vh auf einem Body-Tag verwendet, und 100% (oder 100vh, ich habe beide versucht) auf zwei Inline-Block-Span, von denen jede eine Breite von 50vw hat. Ich erwarte, dass sich beide Spannen nebeneinander befinden, wobei jeder die Hälfte des Bildschirms einnimmt und jeder so groß wie der Bildschirm ist - keine Scrollbalken, kein Leerraum. Körper hat auch eine Marge von 0, um dabei zu helfen. Was ich sehe ist, was ich erwartet habe, außer dass es eine kleine vertikale Bildlaufleiste gibt. Ich habe auch alle Leerräume aus dem Inneren des Körpers entfernt, da ich weiß, dass dies Platz jenseits der 100% Breite hinzufügen kann. Aber ich kann nicht herausfinden, warum ich die Bildlaufleiste bekomme ... Ich weiß, ich kann einfach einen Überlauf hinzufügen: Versteckt am Körper und die Bildlaufleiste verschwindet, aber wieder - warum die Bildlaufleiste an erster Stelle?
Hier ist die HTML-Datei:
%Vor% Das ist leider die Natur von Inline-Elementen. Sie müssen vertical-align:top hinzufügen, um keine Zeilenhöhe und andere fontbezogene Abstände zu erzwingen.
Das liegt am Inline-Element-Leerraumrand.
Hier habe ich den margin-bottom: -4px; hack (und es gibt noch viel mehr) benutzt, um ihn zu entfernen. Beachten Sie jedoch, wenn Sie diesen Hack verwenden, müssen Sie ihn anhand der aktuellen Schriftgröße überprüfen und entsprechend anpassen.
Wenn Sie wirklich Inline-Block benötigen, verwenden Sie den vertical-align hack
Ein besserer Weg ist die Verwendung von flex oder float (um ältere Browser zu unterstützen).
Hier ist margin-bottom: -4px;
Hier ist flex
Hier ist float