Unknown space after input element

Question

I am having trouble understanding the spacing in one of my divs as there appears to be some unknown white space to the right of an input element. I have a div with width 684px, containing 2 input elements with the following css:

width: 290px;
padding-left:10px; 
padding-right:0px; 
border:1px solid black; 
margin-left:20px; 
margin-right:20px;

I am expecting the 2 input's to float next to each other as I set the container div's width to the total space occupied by the 2 input boxes: 580(widths) +20(left paddings) +80(left and right margins) +4 (borders) = 684. However, at this width the second input box is shown beneath the first input box. Only if the container div's width is set to a minimum of 689px do the input boxes appear next to each other. Please note that margin and padding have both been set to 0 for the container div. I have inspected all elements using 2 browsers and the sizes correspond to those stated above. What is taking up the additional 5 pixels (689-684 pixels)?

@RunLoop You can judge that from seeing my profile, also, no one will try to answer if you explain them in this way, share your code in proper format, explain the issue precisely and then you'll get some helpful answers for sure. — Mr. Alien, Aug 28 '14 at 10:24
Mr Alien is in top ten list of css user @ no 6 http://stackoverflow.com/tags/css/topusers — NullPoiиteя, Aug 28 '14 at 10:33

score 1 · Answer 1 · edited May 23 '17 at 12:21

1

if you what them to stick toghether float them both to left. by default they are inline-blocks so it is actually normal to have white space between inline elements

edit: see comments and tks for delivering this link Display: Inline block - What is that space?

that is exactly what i meant... I was just to lazy to write it up ... lesson learned.

edited May 23 '17 at 12:21

Community

1
1

answered Aug 28 '14 at 08:08

Victor Radu

2,262
1
12
18

Although this does work, I would still like to understand why there would be unknown white space between inline elements – RunLoop Aug 28 '14 at 09:52
@mikedidthis thanks a lot - that makes sense and explains it. If you add your link as an answer I will accept it. – RunLoop Aug 28 '14 at 10:37
tripleb if you want to add the whitespace info from the link above, please do so @RunLoop can accept this answer. – mikedidthis Aug 28 '14 at 10:46

score 0 · Accepted Answer · edited May 23 '17 at 12:12

0

It appears that browsers reserve space in certain elements even if they have no content e.g. divs. Such space can be effectively removed by setting the font-size for such elements to 0. A thorough explanation can be found here as pointed out by @mikedidthis.

edited May 23 '17 at 12:12

Community

1
1

answered Sep 03 '14 at 08:16

RunLoop

20,288
21
96
151

Unknown space after input element

2 Answers2