垂直HTML按钮间距问题

Question

我有三个垂直排列的<input type="submit" />元素。 顶部的两个位于相同的<div>和<table> ，而底部的两个位于不同的<div>和<table> 。 我无法更改此设置，因为这是出于UX目的，在较大页面的上下文中（这只是摘录）。 我的第三个按钮的像素太低，因此这三个按钮之间的间距不一致。

我不想做vertical-align: -2px或类似的东西。 我想了解一下为什么间距不一致。 谢谢阅读。

这是一个JSFiddle示例： https ://jsfiddle.net/y57wLtjb/

Answer 1

使用border-spacing: 0; table

 table { border-collapse: collapse; border-spacing: 0; } 

 <div id="pre-update-section"> <table> <tr> <td><input style="width:100%" type="submit" value="Check for duplicates" data-bind="click: CheckForDuplicates" id="btnCheckDups" /></td> <td><label id="ajaxStatusMsg"></label></td> </tr> <tr> <td><input style="width:100%" type="submit" value="Load Catalog Parts" data-bind="click: LoadCatalogParts" id="btnLoadCatalogParts" disabled="disabled" /></td> <td></td> </tr> </table> </div> <div id="start-update-section"> <table > <tr> <td><input style="width:100%" type="submit" value="Run Catalog Update" data-bind="click: RunCatalogUpdate" id="btnRunCatalogUpdate" disabled="disabled" /></td> <td> </td> </tr> </table> </div>