使跨度表现得像一个按钮

Question

我有以下HTML

<div class="btns">

<div id="green">    <span class="btn btn-block btn-large btn-success disabled green_btn">Green</span>

 <div class="num">(1)</div>
</div>
<div id="red">
    <form class="button_to" >
        <div>
            <input class="btn btn-block btn-large btn-danger red_btn"
            type="submit" value="Red">
        </div>
    </form>
    <div class="num">(0)</div>
</div>
</div>

和css

.btns {
    position: relative;
}

.num {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

#green, #red {
    display: inline-block;
    width: 49%;
    position: relative;
}

.green_btn, .red_btn {
    margin-bottom: 4px;
}

我无法弄清楚为什么绿色范围下的(1)在红色按钮下的行为不像(0).如果我将bottom:0;其移除,则修复绿色,但会混淆红色.

这是一个jsfiddle来说明问题http://jsfiddle.net/HajHV/

我在这里错过了什么？

Answer 1

这是因为表格的边距。

margin: 0 0 20px;