CODEWITHSUNDEEP
htmlcsshtml-tablemarginpadding
Jacob Stamm
Jacob Stamm

Reputation: 1828

Vertical HTML button spacing issues

I have three <input type="submit" /> elements arranged vertically. The top two are in the same <div> and <table>, but the bottom one is in a different <div> and <table>. I can't change this, as it is for UX purposes in the context of the larger page from which this is just a snippet. My third button is an extra few pixels too low, such that the spacing between these three buttons is inconsistent.

I would like to not have to do a junky vertical-align: -2px or something like that. What I'd like is to gain some understanding as to why the spacing is inconsistent. Thanks for reading.

Here is a JSFiddle example: https://jsfiddle.net/y57wLtjb/

Upvotes: 2

Views: 581

Answers (1)

Dmitriy
Dmitriy

Reputation: 4503

use border-spacing: 0; for 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>

Upvotes: 4

Related Questions