并排排列的CSS提交按钮外边距合并问题

嘿，我一眼就发现问题所在了！你遇到的右margin不生效的情况，根源是CSS margin属性的语法错误。

问题出在哪？ #

你写的CSS里：

input[type=submit]{ 
  margin:0.6em,2em,1em,1em; /* 这里用了逗号，这是错误的！ */
  background: #808080; 
  padding: 5px 12px;
  /* 其他样式 */
}

CSS中，margin的四个方向值（上/右/下/左）必须用空格分隔，而不是逗号。逗号是用于像font-family、多背景这样的多组值场景，浏览器会把带逗号的margin声明判定为无效，自然就不会应用你设置的右margin了。

修正方案 #

把逗号换成空格，修改后的CSS：

input[type=submit]{ 
  margin: 0.6em 2em 1em 1em; /* 上 右 下 左，顺时针顺序 */
  background: #808080; 
  padding: 5px 12px;
  /* 其他样式 */
}

这样设置后，两个按钮之间的右margin（2em）就会正常生效，它们之间会出现你想要的间距。

额外小技巧 #

如果上下margin值相同，左右margin值也相同，还可以简写margin，让代码更简洁：

/* 上下0.6em，左右2em */
input[type=submit]{ 
  margin: 0.6em 2em;
  /* 其他样式 */
}

完整示例代码 #

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

input[type=submit]{ 
  margin: 0.6em 2em 1em 1em;
  background: #808080;
  padding: 5px 12px;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}

内容的提问来源于stack exchange，提问作者Parapluie