Css 样式化元素'；输入[类型=“提交”]'；和'；按钮'；具有与其他元素不同的宽度
通过给宽度指定不同的数值（从而获得相等的可见宽度）来解决这个问题很容易，但这让我很烦 代码如下：Css 样式化元素'；输入[类型=“提交”]'；和'；按钮'；具有与其他元素不同的宽度,css,html,button,Css,Html,Button,通过给宽度指定不同的数值（从而获得相等的可见宽度）来解决这个问题很容易，但这让我很烦 代码如下： <!DOCTYPE html> <style> .box { width: 6em; margin: 1em auto; padding: 1em; font-family:sans-serif; font-size: 1em; font-weight: bold; border: none; display:
<!DOCTYPE html>
<style>
.box {
width: 6em;
margin: 1em auto;
padding: 1em;
font-family:sans-serif;
font-size: 1em;
font-weight: bold;
border: none;
display: block;
text-decoration:inherit;
text-align:center;
color:inherit;
background-color:blue;
}
</style>
<html>
<body>
<a class="box">Anchor</a>
<input type="submit" class="box" value="Input" />
<button type="submit" class="box">Button</button>
</body>
</html>
.盒子{
宽度：6em；
保证金：1em自动；
填充：1em；
字体系列：无衬线；
字号：1em；
字体大小：粗体；
边界：无；
显示：块；
文字装饰：继承；
文本对齐：居中；
颜色：继承；
背景颜色：蓝色；
}
通过添加规则，您可以获得相同的宽度：
box-sizing: border-box;
问题在于浏览器分配宽度的方式，特别是宽度
是否包括填充和边框宽度。使用box size:border box
强制（兼容）浏览器将这些宽度包含在总体指定宽度内，而不管“默认”模型如何
参考资料：
就是这样。谢谢宽度分配不同有什么原因吗？