React中内边距/外边距异常：设置后组件超出屏幕如何解决？

这是CSS默认盒模型导致的问题：默认的content-box盒模型中，元素设置的width和height仅代表内容区域的尺寸，padding和border会额外叠加到总尺寸上，所以你设置width:900加padding:20后，实际总宽度会变成900+20*2=940，自然会超出预期范围。

解决方法很简单，给元素添加box-sizing: border-box属性，它会让元素的width和height包含padding和border的尺寸，总大小保持你设定的数值，内部内容区域自动缩小。

修改后的代码如下：

export default () => {
  return (
    <div style={{width: 900, height: 600, background: "green", padding: 20, boxSizing: 'border-box'}}></div>
  );
}

如果希望项目中所有元素都遵循这个规则，可以在全局样式里设置：

* {
  box-sizing: border-box;
}

这样就不用每个组件单独设置，所有元素的padding和border都会包含在设定的宽高内。

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