Search code examples
csssubmit-button

Submit buttons CSS margin collapsing when positioned side by side

I have some nicely styled CSS submit buttons, but the margin attribute doesn't seem to be working when two buttons fall side by side. Please see my image sample, below.

The buttons simply fall into a single div, like so:

<div>
    <input type="submit" value="Confirm My Order.">
    <input type="submit" value="Revise My Order.">
</div>

Here is the CSS:

input[type=submit]{
    margin:0.6em,2em,1em,1em; /* Right margin (2nd value) is not working */
    background: #808080;
    padding: 5px 12px; /* padding inside the button */
    border:1px solid #808080;
    cursor:pointer;
    -webkit-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
    box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    color:#fff;
}

Given the right margin, I wouldn't think that the buttons would kiss like this. Any thoughts why the margin may not be working?

My thanks to you in advance.

Consecutive submit buttons

Solution

  • If you inspect it using chrome devtools or similar, you will see that it notifies you of "Invalid Property Value". This is due to a syntax error. You want your css to be this 

    input[type=submit]{
     margin:0.6em 2em 1em 1em; /* Right margin (2nd value) is now working */

    The rest should be fine