Question

I have a DIV container in the screenshot below. I have 15px padding to the left and right but for some reason, the contents are being spaced downwards…

Apart from the left & right padding, nothing else is being applied. Setting the line height, borders, heights etc do not make any difference.

The input itself is comprised of:

<div class="numericInput">
   <input class="numeric input" type="text">
   <div class="numericWrap"><span class="increase"></span><span class="decrease"></span>
   </div>
</div>

No other styling according to IE Developer Tools is causing the gap, only the parent DIV.

Answer 1

As per your screen shot define vertical-align:top in your input tag. Like this:

input{
 vertical-align:top;
}