css - パディング付きのボックス境界

Question

私は次のコードを持っています：

.submit_wrap {
    padding: 1px;
    border: 1px solid #b0e1c4;
}

.submit {
    height: 20px;
    background: url(images/design/button_bg.gif) repeat-x;
    padding: 1px 10px 0 10px;
    border: 0;
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
}

.submit:hover {
    background: url(images/design/button_bg_selected.gif) repeat-x;
}

そして、私はそれを送信ボタンに適用しようとしています：

<div class="submit_wrap">
    <input class="submit" type="submit" name="submit" value="Conectare">
</div>

しかし、このようなものを取得する代わりに：

私はこれを手に入れます：

submit_wrapクラスの幅を設定することもできますが、問題は、このクラスをより多くの送信ボタンに適用したいので、このボタンの幅が異なることです。私は何をすべきか？

Answer 1

display: inline-block

.submit_wrapに追加します