HTML: Can't delete small 5px gap between two buttons - html

Question

I got a small gap between two buttons and I can't deal with it, tried to look in browser terminal, but that didn't helped.
Here are the buttons:
<div class="secondTableVRow">
<input type="submit" name="submit" value="Submit" id="submit" onMouseOver="onSubmitHover()" onMouseOut="submitFadeOut()" onclick="submitForm()"/>
<input type="button" name="extend" value="Advanced" id="extend" onMouseOver="noteFade('extendNote')" onMouseOut="noteFadeOut('extendNote')" onClick="advancedOptions()" />
</div>
CSS:
.secondTableVRow{
width:318px;
background-color:green;
display:inline-block;
}
#submit{
cursor:pointer;
display:inline-block;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
width:156px;
height:35px;
outline:none;
border:none;
background-color:#DDDDDD;
-webkit-transition: background-color 0.4s linear 0s;
-moz-transition: background-color 0.4s linear 0s;
-o-transition: background-color 0.4s linear 0s;
transition: background-color 0.4s linear 0s;
}
Both buttons have same CSS, I know I should use class for that and I will, just want to fix this problem first. Live example of buttons: http://www.diligencehelps.com/php_includes/register_form.php
There seems to be a small gap after EVERY element in the form, why is that happening?If any more code needed just ask.

Answer 1

Try this:
<div class="secondTableVRow">
<input type="submit" name="submit" value="Submit" id="submit" onMouseOver="onSubmitHover()" onMouseOut="submitFadeOut()" onclick="submitForm()"/><!--
--><input type="button" name="extend" value="Advanced" id="extend" onMouseOver="noteFade('extendNote')" onMouseOut="noteFadeOut('extendNote')" onClick="advancedOptions()" />
</div>
HTML can be very picky about the whitespaces.
For more background information, check this out: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

Add this:
.secondTableVRow:last-of-type {
font-size: 0;
}
#submit, #extend {
width: 159px;
}
The space is due to whitespace - HTML interprets linebreaks as whitespace. font-size: 0 takes care of that, but leaves some extra space on the right as #submit and #extend don't quite fill their parent .secondTableVRow container. You could also use width: 50% instead of 159px.
The :last-of-type is to avoid the font-size: 0 from being applied to the .secondTableVRow earlier in the markup, but you could just give that last one an ID (or additional class like .final instead and select it that way, e.g. .secondTableVRow.final { font-size: 0; }.
edit: as Hauke mentioned in the comments, this may be problematic in certain older browers. It also will not work with relative font sizing (e.g. ems or %) because the font size will cascade to descendant elements. You could instead just add float: left to both buttons and overflow: hidden to their container, or another clearfix method.

Answer 3

You could specify them as 50% width, as block elements (instead of inline-block, as this is more supported on older browsers anyway), and float them both left. Just be sure to place a after, so your formatting isn't botched.