html – 到达元素的宽度/高度来自[封闭]的底部

在这里,您可以看到元素大小的每个组件的细分.中间框表示元素的基本大小.几乎在所有情况下,如果你在CSS中设置了宽度规则,你应该在这里看到相同的数字;如果不这样做,您应该开始检查元素的子元素,以查看是否有任何子元素比您为width属性指定的数字宽,因为扩展父元素的子元素是一个相当常见的问题/意外结果.

如果您在此处看到与指定相同的数字,则较大的宽度来自元素的填充/边距/边框,因此您应该开始检查样式规则以查看您为这些属性设置的内容,以及.

另外,请记住,根据您使用的框大小调整方法,元素的总宽度将以不同的方式从这些属性计算出来.例如,如果您设置了box-sizing：border-box;和您应用这些样式规则：

div {
    width: 500px;
    padding: 100px;
    border: 5px solid black;
}

你会看到一个像这样的盒子模型图：

请注意,基本宽度数不再是500,因为填充和边框规则现在对宽度有贡献.因此,当您指定宽度时,它将是所有这些属性的总宽度,并且您的基本宽度将只是填充或边框属性未使用的剩余部分.

我希望有所帮助,如果您想进一步澄清任何事情,请告诉我.