La définition de la largeur d'entrée avec calc ne fonctionne pas comme prévu

Question

J'ai une entrée avec width: calc(100% - 100px); sans marge/marge/bordure. Je veux mettre un div à côté avec position : inline-block; et width : 100px;.

Le div passe à la ligne suivante mais je ne trouve aucune raison pour cela. Si je réduis la largeur div à 96px alors ça marche bien. Je me demande ce qui cause cette largeur manquant de 4px!

Veuillez noter que box-sizing : borderbox n'est pas lié à ce problème car je n'ai aucun rembourrage ou bordure.

Voici the plunker, testé avec chrome et firefox.

Answer 1

Supprimez l'espace blanc entre les éléments. Par défaut, inline et inline-block préservent l'espace entre les éléments puisqu'ils sont en ligne (tout comme les espaces entre les mots/lettres). Vous pouvez également mettre un commentaire HTML entre eux afin qu'il n'y ait pas d'espace blanc là-bas.

<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> 

ou

<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>