0

I have an input with width: calc(100% - 100px); without padding/margin/border. I want to put a div beside it with position : inline-block; and width : 100px;.

The div goes to the next line but I cannot find any reason for it. If I reduce the div width to 96px then it works fine. I am wondering what is causing that 4px missing width!

Please note that box-sizing : borderbox is not related to this issue as I do not have any padding or border.

Here is the plunker, tested with chrome and firefox.

Arashsoft
  • 2,749
  • 5
  • 35
  • 58

1 Answers1

1

Remove the white space between the elements. By default, inline and inline-block will preserve the space between elements since they're inline (just like spaces between words/letters). You can also put an HTML comment between them so there isn't a white space there.

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

or

<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>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • Thank you :) is there any way to disable this behavior? for example by adding something to DOCTYPE or html tag or meta? – Arashsoft Mar 13 '17 at 18:38
  • @Arashsoft not that I'm aware. It's a fundamental aspect of html and css if you're using `inline` or `inline-block` elements. Just like letters/words, you want the space between them. inline elements are like letters/words. – Michael Coker Mar 13 '17 at 18:45