CSS盒子模型像素计算疑问：1000px容器内元素适配问题

问题根源：你可能没算对元素的实际水平占用宽度 #

这绝对是CSS新手最容易踩的盒子模型坑！默认情况下，CSS使用content-box模型——也就是说，元素的总水平占用宽度= 内容宽度（width属性值） + 左右padding + 左右border + 左右margin。你浏览器里显示完美适配，但自己算不对，大概率是没把这些额外的间距（padding、margin）算进总宽度里。

逐个拆解你的元素宽度计算 #

先把你代码里的核心布局部分拎出来：

#main { 
  float:left; 
  width:660px; 
  margin: 30px; /* 上下左右都是30px */
} 
#news { 
  float: left; 
  width: 220px; 
  margin: 20px 0px; /* 上下20px，左右无间距 */
  padding:30px; /* 上下左右都是30px */
}

计算#main的水平总占用宽度 #

• 内容区宽度：660px
• 左右margin：30px × 2 = 60px（你的margin是四个方向都设了30px，左右的部分会占用水平空间）
• 无额外padding和border（代码里没设置）
• 总水平占用宽度：660 + 60 = 720px

计算#news的水平总占用宽度 #

• 内容区宽度：220px
• 左右padding：30px × 2 = 60px（padding是元素内部的间距，会算进总宽度里）
• 左右margin：0px × 2 = 0px（你的margin只设了上下，左右没占空间）
• 无额外border（代码里没设置）
• 总水平占用宽度：220 + 60 = 280px

总和验证 #

把两个元素的总占用宽度加起来：720px + 280px = 1000px，刚好等于#wrapper的宽度，这就是浏览器里能完美适配的原因！

新手避坑小贴士 #

• 永远记住：默认盒子模型下，width只是内容区的宽度，不是元素的总宽度
• 如果觉得这种拆分计算太麻烦，可以给元素设置box-sizing: border-box，这样width就直接包含了内容、padding和border，计算会直观很多：

  #main, #news {
    box-sizing: border-box;
  }
  

  比如设置这个属性后，你给#news设width:280px、padding:30px，内容区会自动变成280-60=220px，不用手动倒推计算。

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