CSS 计算的宽度与指定的宽度不同

Question

CSS 计算的宽度与指定的宽度不同

如本箱所示，为预览按钮指定的宽度为 120 px，而渲染宽度始终为 132 px（在不同屏幕上）。

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

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Amr*_*bib 5

只需添加box-sizing: border-box;您的按钮样式即可

这将确保宽度和高度属性（以及最小/最大属性）包括内容、填充和边框，但不包括边距。

有关更多信息，box-sizing请查看以下链接 https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

归档时间：	8 年，2 月前
查看次数：	4683 次
最近记录：	8 年，2 月前