CODEWITHSUNDEEP
htmlcss
RunLoop
RunLoop

Reputation: 20376

Unknown space after input element

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

Upvotes: 0

Views: 743

Answers (2)

RunLoop
RunLoop

Reputation: 20376

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.

Upvotes: 0

Victor Radu
Victor Radu

Reputation: 2292

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.

Upvotes: 1

Related Questions