Box border with padding

Question

I have the following code:

.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;
}

And I'm trying to apply it to a submit button:

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

But instead of getting something like this:

I get this:

I could set the width of the submit_wrap class, but the problem is that I want to apply this class to more submit buttons and the width of this buttons is diferent. What should I do?

Answer 1

display: inline-block

add it to .submit_wrap