Einstellung Eingangsbreite mit Calc funktioniert nicht wie

Question

erwartete ich einen Eingang mit width: calc(100% - 100px); ohne Polsterung/margin/Grenze. Ich möchte ein div daneben mit position : inline-block; und width : 100px; setzen.

Die div geht in die nächste Zeile, aber ich kann keinen Grund dafür finden. Wenn ich die div Breite auf 96px reduziere, dann funktioniert es gut. Ich frage mich, was die 4px fehlende Breite verursacht!

Bitte beachten Sie, dass box-sizing : borderbox nicht zu diesem Problem ist, da ich keine Polsterung oder eine Grenze haben.

Hier ist the plunker, getestet mit Chrome und Firefox.

Answer 1

den Leerraum zwischen den Elementen entfernen. Inline und Inline-Block behalten standardmäßig den Abstand zwischen den Elementen bei, da sie Inline sind (genau wie Leerzeichen zwischen Wörtern/Buchstaben). Sie können auch einen HTML-Kommentar zwischen sie setzen, so dass dort kein weißer Bereich ist.

<input type="test" style="width: calc(100% - 100px); padding: 0; border: 0; margin: 0; box-sizing:borderbox" value="100%-100px input"><div style="width: 97px; display: inline-block">97 px Div</div> 

oder

<input type="test" style="width: calc(100% - 100px); padding: 0; border: 0; margin: 0; box-sizing:borderbox" value="100%-100px input"><!-- 
--><div style="width: 97px; display: inline-block">97 px Div</div>