calc로 입력 너비를 설정하면 예상대로 작동하지 않습니다.

Question

패딩/여백/테두리없이 width: calc(100% - 100px); 입력이 있습니다. 옆에 div를 넣고 싶습니다. position : inline-block;과 width : 100px;.

div는 다음 줄로 이동하지만 그 이유는 찾을 수 없습니다. div 너비를 96px로 줄이면 제대로 작동합니다. 4px가 누락 된 너비가 무엇인지 궁금합니다!

패딩 또는 경계선이 없으므로 box-sizing : borderbox은이 문제와 관련이 없습니다.

여기에 크롬과 파이어 폭스로 테스트 한 the plunker입니다.

Answer 1

요소 사이의 공백을 제거하십시오. 기본적으로 인라인 및 인라인 블록은 인라인이므로 요소 사이의 공간을 유지합니다 (단어/문자 사이의 공백처럼). 거기에 공백이 없도록 HTML 주석을 넣을 수도 있습니다.

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

또는

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