并排放置时提交按钮 CSS 边距折叠

Question

我有一些样式很好的 CSS 提交按钮，但是当两个按钮并排放置时，margin 属性似乎不起作用。请在下面查看我的图片示例。

按钮简单地归为一个 div，像这样：

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

这里是 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;
}

考虑到正确的边距，我不认为按钮会像这样吻合。有什么想法为什么边距可能不起作用？

在此先感谢您。

Answer 1

如果您使用 chrome devtools 或类似工具检查它，您会看到它通知您 "Invalid Property Value"。这是由于语法错误。你希望你的 css 是这个

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

其他应该没问题

Answer 2

与给出的答案相同，但解释更好。

在边距 css 中使用多个输入时，您不想在每个值之间使用逗号 space。

input[type=submit]{
    margin:0.6em 2em 1em 1em;
}

有关页边距的进一步解释，请查看此有用的 link： https://developer.mozilla.org/en-US/docs/Web/CSS/margin

并排放置时提交按钮 CSS 边距折叠

Submit buttons CSS margin collapsing when positioned side by side

css

submit-button