如图所示bin为预览按钮指定的宽度为 120 像素，而呈现的宽度始终为 132 像素(在不同的屏幕上)。
.btn-grey{
cursor: pointer;
background: #f1f3f6;
border: 1px solid #d7d9e1;
box-shadow: 1px 1px 1px #fff inset;
border-radius: 3px;
color: #838AAB;
display: inline-block;
height: 30px;
padding: 0 5px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div style="display: flex; width: 60%; justify-content: center;">
<input name="preview" class="btn-grey" value="Preview" style="flex-basis: 120px; width: 120px; height: 35px;max-width: 120px; max-height: 35px; margin : 5px 5px 5px 5px " title="preview"/>
<input name="load" class="btn-grey" type="submit" value="Load " style="width: 120px; height: 35px;max-width: 120px; max-height: 35px;margin : 5px 5px 5px 5px "/>
</div>
</body>
</html>最佳答案
只需在按钮样式中添加 box-sizing: border-box;
这将确保宽度和高度属性(以及最小/最大属性)包括内容、填充和边框，但不包括边距。
有关 box-sizing 的更多信息，请查看以下链接
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
关于html - CSS 计算宽度与指定宽度不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47347764/