2个具有相同最大宽度的div显示不同的宽度[重复]

Question

红色框的 div 以及绿色和紫色框的 div 都设置为相同的最大宽度 75rem。当在宽显示器上拉伸时，红色框显示的最大宽度接近 1250 像素，我对此感到困惑。

JSFiddle

我正在将这个帮助类应用到两个 div。

.wrapper {
margin: auto;
max-width: 75rem;
}

Answer 1

将 CSS box-sizing:border-box 添加到您的 .hero 将解决问题。

会发生什么

因为.hero 在左右两边都有 20px 的填充。你的整个 div 变成 75rem + 40px

box-sizing:border-box 确保填充应包含在宽度中。所以你的 div 的实际宽度会变成 75rem - 40px

更多关于盒子尺寸的信息：https://www.w3schools.com/css/css3_box-sizing.asp